Pagination Loop
codes you should have for slider working
HtML Code
<div class="freshWrapperPaginationLoop">
<!-- btn right -->
<img
id="btnRightPaginationLoop"
class="btnRightPaginationLoop"
src="docs/images/btnRight.png"
alt="#"
/>
<!-- btn left -->
<img
id="btnLeftPaginationLoop"
class="btnLeftPaginationLoop"
src="docs/images/btnLeft.png"
alt="#"
/>
<!-- dots -->
<div class="dotsPositionLoop">
<ul id="dotsPaginationLoop"></ul>
</div>
<!------------------ slide 1 ------------------>
<div
class="freshSwiperPaginationLoop"
data-dotTurnLoop="1"
>
<img src="docs/images/slide1.png" alt="" />
</div>
<!------------------ slide 2 ------------------>
<div
class="freshSwiperPaginationLoop"
data-dotTurnLoop="2"
>
<img src="docs/images/slide2.jpg" alt="" />
</div>
<!------------------ slide 3 ------------------>
<div
class="freshSwiperPaginationLoop"
data-dotTurnLoop="3"
>
<img src="docs/images/slide3.png " alt="" />
</div>
<!------------------ slide 4 ------------------>
<div
class="freshSwiperPaginationLoop"
data-dotTurnLoop="4"
>
<img src="docs/images/slide4.png" alt="" />
</div>
<!------------------ slide 5 ------------------>
<div
class="freshSwiperPaginationLoop"
data-dotTurnLoop="5"
>
<img src="docs/images/slide5.jpg" alt="" />
</div>
</div>
css Code
.wraperPaginationLoop {
width: 85%;
height: 500px;
margin: 0 auto;
border: 1px solid #ffffff1a;
background-color: white;
display: flex;
flex-wrap: nowrap;
overflow: hidden;
position: relative;
}
.btnRightCssPaginationLoop {
width: 50px;
height: 50px;
position: absolute;
z-index: 10;
right: 1.25rem;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
transition: 0.7s all;
&:hover {
transform: translateY(-50%) scale(1.2);
}
}
.btnLeftCssPaginationLoop {
width: 50px;
height: 50px;
position: absolute;
z-index: 10;
left: 1.25rem;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
transition: 0.7s all;
&:hover {
transform: translateY(-50%) scale(1.2);
}
}
.imagesCssPaginationLoop {
width: 100%;
height: 100%;
display: flex;
flex-shrink: 0;
> img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.dotsPositionLoop {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 80px;
z-index: 20;
> ul {
display: flex;
gap: 5px;
}
}
.dotsPositionCrLoop {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: black;
border: 1px solid rgb(0, 174, 255);
}
.dotActiveLoop {
background-color: rgb(0, 174, 255) !important;
}
js Code
let _imagesWrapperPaginationLoop = document.querySelectorAll(
".freshSwiperPaginationLoop"
);
let freshWrapperPaginationLoop = document.querySelector(
".freshWrapperPaginationLoop"
);
const btnRightPaginationLoop = document.getElementById(
"btnRightPaginationLoop"
);
const btnLeftPaginationLoop = document.getElementById("btnLeftPaginationLoop");
const dotsPaginationLoop = document.querySelector("#dotsPaginationLoop");
const TimeSpeedPaginationLoop = 1500;
btnRightPaginationLoop.classList.add("btnRightCssPaginationLoop");
btnLeftPaginationLoop.classList.add("btnLeftCssPaginationLoop");
freshWrapperPaginationLoop.classList.add("wraperPaginationLoop");
_imagesWrapperPaginationLoop.forEach((imageWrap) => {
imageWrap.classList.add("imagesCssPaginationLoop");
});
let flagRightPaginationLoop = 0;
let transRightNumbPaginationLoop = 0;
let flagRightClickPaginationLoop = 0;
let dotFlagBooleanLoop = true;
let wichImageLoop;
for (let i = 0; i <= _imagesWrapperPaginationLoop.length - 1; i++) {
dotsPaginationLoop.innerHTML += `<li class="dotsPositionCrLoop dotLoop${
i + 1
}"></li>`;
wichImageLoop =
_imagesWrapperPaginationLoop[i].getAttribute("data-dotTurnLoop");
}
let dotLoop1 = document.querySelector(".dotLoop1");
let dotLoop2 = document.querySelector(".dotLoop2");
let dotLoop3 = document.querySelector(".dotLoop3");
let dotLoop4 = document.querySelector(".dotLoop4");
let dotLoop5 = document.querySelector(".dotLoop5");
dotLoop1.classList.add("dotActiveLoop");
let _imgNumbLoop;
btnRightPaginationLoop.addEventListener("click", () => {
if (flagRightClickPaginationLoop == _imagesWrapperPaginationLoop.length - 1) {
btnRightPaginationLoop.removeEventListener("click", () => {});
} else {
flagRightClickPaginationLoop++;
transRightNumbPaginationLoop =
transRightNumbPaginationLoop + flagRightPaginationLoop - 100;
_imagesWrapperPaginationLoop.forEach((item) => {
item.style.transition = "0.5s all";
item.style.transform = `translateX(${transRightNumbPaginationLoop}%)`;
});
// make dots color
if (dotFlagBooleanLoop) {
_imgNumbLoop =
flagRightClickPaginationLoop - flagLeftClickPaginationLoop + 1;
// dots get bg
if ("dotLoop2" == `dotLoop${_imgNumbLoop}`) {
dotLoop2.classList.add("dotActiveLoop");
dotLoop1.classList.remove("dotActiveLoop");
dotLoop3.classList.remove("dotActiveLoop");
dotLoop4.classList.remove("dotActiveLoop");
dotLoop5.classList.remove("dotActiveLoop");
} else if ("dotLoop3" == `dotLoop${_imgNumbLoop}`) {
dotLoop3.classList.add("dotActiveLoop");
dotLoop1.classList.remove("dotActiveLoop");
dotLoop2.classList.remove("dotActiveLoop");
dotLoop4.classList.remove("dotActiveLoop");
dotLoop5.classList.remove("dotActiveLoop");
} else if ("dotLoop4" == `dotLoop${_imgNumbLoop}`) {
dotLoop4.classList.add("dotActiveLoop");
dotLoop1.classList.remove("dotActiveLoop");
dotLoop2.classList.remove("dotActiveLoop");
dotLoop3.classList.remove("dotActiveLoop");
dotLoop5.classList.remove("dotActiveLoop");
} else if ("dotLoop1" == `dotLoop${_imgNumbLoop}`) {
dotLoop1.classList.add("dotActiveLoop");
dotLoop4.classList.remove("dotActiveLoop");
dotLoop2.classList.remove("dotActiveLoop");
dotLoop3.classList.remove("dotActiveLoop");
dotLoop5.classList.remove("dotActiveLoop");
} else if ("dotLoop5" == `dotLoop${_imgNumbLoop}`) {
dotLoop5.classList.add("dotActiveLoop");
dotLoop1.classList.remove("dotActiveLoop");
dotLoop2.classList.remove("dotActiveLoop");
dotLoop3.classList.remove("dotActiveLoop");
dotLoop4.classList.remove("dotActiveLoop");
}
}
}
});
let flagLeftClickPaginationLoop = 0;
let flagLeftPaginationLoop = 0;
btnLeftPaginationLoop.addEventListener("click", () => {
// if click
flagRightClickPaginationLoop--;
flagLeftClickPaginationLoop++;
// dots get bg
if (dotFlagBooleanLoop) {
_imgNumbLoop = flagRightClickPaginationLoop + 1;
if ("dotLoop2" == `dotLoop${_imgNumbLoop}`) {
dotLoop2.classList.add("dotActiveLoop");
dotLoop1.classList.remove("dotActiveLoop");
dotLoop3.classList.remove("dotActiveLoop");
dotLoop4.classList.remove("dotActiveLoop");
dotLoop5.classList.remove("dotActiveLoop");
} else if ("dotLoop3" == `dotLoop${_imgNumbLoop}`) {
dotLoop3.classList.add("dotActiveLoop");
dotLoop1.classList.remove("dotActiveLoop");
dotLoop2.classList.remove("dotActiveLoop");
dotLoop4.classList.remove("dotActiveLoop");
dotLoop5.classList.remove("dotActiveLoop");
} else if ("dotLoop4" == `dotLoop${_imgNumbLoop}`) {
dotLoop4.classList.add("dotActiveLoop");
dotLoop1.classList.remove("dotActiveLoop");
dotLoop2.classList.remove("dotActiveLoop");
dotLoop3.classList.remove("dotActiveLoop");
dotLoop5.classList.remove("dotActiveLoop");
} else if ("dotLoop1" == `dotLoop${_imgNumbLoop}`) {
dotLoop1.classList.add("dotActiveLoop");
dotLoop4.classList.remove("dotActiveLoop");
dotLoop2.classList.remove("dotActiveLoop");
dotLoop3.classList.remove("dotActiveLoop");
dotLoop5.classList.remove("dotActiveLoop");
} else if ("dotLoop5" == `dotLoop${_imgNumbLoop}`) {
dotLoop5.classList.add("dotActiveLoop");
dotLoop1.classList.remove("dotActiveLoop");
dotLoop2.classList.remove("dotActiveLoop");
dotLoop3.classList.remove("dotActiveLoop");
dotLoop4.classList.remove("dotActiveLoop");
}
}
// if click too much and dont have picture
if (flagRightClickPaginationLoop < 0) {
btnLeftPaginationLoop.removeEventListener("click", () => {});
flagRightClickPaginationLoop = 0;
flagLeftClickPaginationLoop = 0;
transRightNumbPaginationLoop = 0;
_imgNumbLoop = 0;
} else {
transRightNumbPaginationLoop =
transRightNumbPaginationLoop + flagLeftPaginationLoop + 100;
_imagesWrapperPaginationLoop.forEach((item) => {
item.style.transition = "0.5s all";
item.style.transform = `translateX(${transRightNumbPaginationLoop}%)`;
});
}
});
// auto click
let goToRightPaginationLoop = true;
let statePaginationLoop = true;
setInterval(() => {
if (goToRightPaginationLoop == true) {
if (statePaginationLoop) {
btnRightPaginationLoop.click();
if (
flagRightClickPaginationLoop ===
_imagesWrapperPaginationLoop.length - 1
) {
statePaginationLoop = false;
}
} else {
goToRightPaginationLoop = false;
}
} else {
// click on left
btnLeftPaginationLoop.click();
// click when image not exist
if (transRightNumbPaginationLoop == 0) {
goToRightPaginationLoop = true;
statePaginationLoop = true;
}
}
}, TimeSpeedPaginationLoop);