Pagination
codes you should have for slider working
HtML Code
<div class="freshWrapperPagination mt-10 relative">
<!-- btn right -->
<img
id="btnRightPagination"
class="btnRightPagination"
src="docs/images/btnRight.png"
alt="#"
/>
<!-- btn left -->
<img
id="btnLeftPagination"
class="btnLeftPagination"
src="docs/images/btnLeft.png"
alt="#"
/>
<!-- dots -->
<div class="dotsPosition">
<ul id="dotsPagination"></ul>
</div>
<!------------------ slide 1 ------------------>
<div
class="freshSwiperPagination po1"
data-dotTurn="1"
data-class="po4"
>
<img src="docs/images/slide1.png" alt="" />
</div>
<!------------------ slide 2 ------------------>
<div
class="freshSwiperPagination po2"
data-dotTurn="2"
data-class="po2"
>
<img src="docs/images/slide2.jpg" alt="" />
</div>
<!------------------ slide 3 ------------------>
<div
class="freshSwiperPagination po3"
data-dotTurn="3"
data-class="po3"
>
<img src="docs/images/slide3.png " alt="" />
</div>
<!------------------ slide 4 ------------------>
<div
class="freshSwiperPagination po4"
data-dotTurn="4"
data-class="po4"
>
<img src="docs/images/slide4.png" alt="" />
</div>
</div>
css Code
.wraperPagination {
width: 85%;
height: 500px;
margin: 0 auto;
border: 1px solid #ffffff1a;
background-color: white;
display: flex;
flex-wrap: nowrap;
overflow: hidden;
}
.btnRightCssPagination {
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);
}
}
.btnLeftCssPagination {
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);
}
}
.imagesCssPagination {
width: 100%;
height: 100%;
display: flex;
flex-shrink: 0;
> img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.dotsPosition {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 80px;
z-index: 20;
> ul {
display: flex;
gap: 5px;
}
}
.dotsPositionCr {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: black;
border: 1px solid rgb(0, 174, 255);
}
.dotActive {
background-color: rgb(0, 174, 255) !important;
}
js Code
let _imagesWrapperPagination = document.querySelectorAll(
".freshSwiperPagination"
);
let freshWrapperPagination = document.querySelector(".freshWrapperPagination");
const btnRightPagination = document.getElementById("btnRightPagination");
const btnLeftPagination = document.getElementById("btnLeftPagination");
const dotsPagination = document.querySelector("#dotsPagination");
btnRightPagination.classList.add("btnRightCssPagination");
btnLeftPagination.classList.add("btnLeftCssPagination");
freshWrapperPagination.classList.add("wraperPagination");
_imagesWrapperPagination.forEach((imageWrap) => {
imageWrap.classList.add("imagesCssPagination");
});
let flagRightPagination = 0;
let transRightNumbPagination = 0;
let flagRightClickPagination = 0;
let dotFlagBoolean = true;
let wichImage;
for (let i = 0; i <= _imagesWrapperPagination.length - 1; i++) {
dotsPagination.innerHTML += `<li class="dotsPositionCr dot${i + 1}"></li>`;
wichImage = _imagesWrapperPagination[i].getAttribute("data-dotTurn");
console.log(i);
}
let dot1 = document.querySelector(".dot1");
let dot2 = document.querySelector(".dot2");
let dot3 = document.querySelector(".dot3");
let dot4 = document.querySelector(".dot4");
dot1.classList.add("dotActive");
let _imgNumb;
btnRightPagination.addEventListener("click", () => {
if (flagRightClickPagination == _imagesWrapperPagination.length - 1) {
btnRightPagination.removeEventListener("click", () => {});
} else {
flagRightClickPagination++;
transRightNumbPagination =
transRightNumbPagination + flagRightPagination - 100;
_imagesWrapperPagination.forEach((item) => {
item.style.transition = "0.5s all";
item.style.transform = `translateX(${transRightNumbPagination}%)`;
});
// make dots color
if (dotFlagBoolean) {
_imgNumb = flagRightClickPagination - flagLeftClickPagination + 1;
// dots get bg
if ("dot2" == `dot${_imgNumb}`) {
dot2.classList.add("dotActive");
dot1.classList.remove("dotActive");
dot3.classList.remove("dotActive");
dot4.classList.remove("dotActive");
} else if ("dot3" == `dot${_imgNumb}`) {
dot3.classList.add("dotActive");
dot1.classList.remove("dotActive");
dot2.classList.remove("dotActive");
dot4.classList.remove("dotActive");
} else if ("dot4" == `dot${_imgNumb}`) {
dot4.classList.add("dotActive");
dot1.classList.remove("dotActive");
dot2.classList.remove("dotActive");
dot3.classList.remove("dotActive");
} else if ("dot1" == `dot${_imgNumb}`) {
dot1.classList.add("dotActive");
dot4.classList.remove("dotActive");
dot2.classList.remove("dotActive");
dot3.classList.remove("dotActive");
}
}
}
});
let flagLeftClickPagination = 0;
let flagLeftPagination = 0;
btnLeftPagination.addEventListener("click", () => {
// if click
flagRightClickPagination--;
flagLeftClickPagination++;
// dots get bg
if (dotFlagBoolean) {
_imgNumb = flagRightClickPagination + 1;
if ("dot2" == `dot${_imgNumb}`) {
dot2.classList.add("dotActive");
dot1.classList.remove("dotActive");
dot3.classList.remove("dotActive");
dot4.classList.remove("dotActive");
} else if ("dot3" == `dot${_imgNumb}`) {
dot3.classList.add("dotActive");
dot1.classList.remove("dotActive");
dot2.classList.remove("dotActive");
dot4.classList.remove("dotActive");
} else if ("dot4" == `dot${_imgNumb}`) {
dot4.classList.add("dotActive");
dot1.classList.remove("dotActive");
dot2.classList.remove("dotActive");
dot3.classList.remove("dotActive");
} else if ("dot1" == `dot${_imgNumb}`) {
dot1.classList.add("dotActive");
dot4.classList.remove("dotActive");
dot2.classList.remove("dotActive");
dot3.classList.remove("dotActive");
}
}
// if click too much and dont have picture
if (flagRightClickPagination < 0) {
btnLeftPagination.removeEventListener("click", () => {});
flagRightClickPagination = 0;
flagLeftClickPagination = 0;
transRightNumbPagination = 0;
_imgNumb = 0;
} else {
transRightNumbPagination =
transRightNumbPagination + flagLeftPagination + 100;
_imagesWrapperPagination.forEach((item) => {
item.style.transition = "0.5s all";
item.style.transform = `translateX(${transRightNumbPagination}%)`;
});
}
});