Default Slider Loop
codes you should have for slider working
HtML Code
<div class="freshWrapperDefLoop mt-10 relative">
<!-- btn right -->
<img
id="btnRightDefaultLoop"
class="btnRightCssLoop"
src="docs/images/btnRight.png"
alt="#"
/>
<!-- btn left -->
<img
id="btnLeftDefaultLoop"
class="btnLeftCssLoop"
src="docs/images/btnLeft.png"
alt="#"
/>
<!------------------ slide 1 ------------------>
<div class="freshSwiperDefLoop">
<img src="docs/images/slide1.png" alt="" />
</div>
<!------------------ slide 2 ------------------>
<div class="freshSwiperDefLoop">
<img src="docs/images/slide2.jpg" alt="" />
</div>
<!------------------ slide 3 ------------------>
<div class="freshSwiperDefLoop">
<img src="docs/images/slide3.png" alt="" />
</div>
<!------------------ slide 4 ------------------>
<div class="freshSwiperDefLoop">
<img src="docs/images/slide4.png" alt="" />
</div>
</div>
css Code
.wraperDefLoop {
width: 85%;
height: 500px;
margin: 0 auto;
border: 1px solid #ffffff1a;
background-color: white;
display: flex;
flex-wrap: nowrap;
overflow: hidden;
}
.btnRightCssLoop {
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);
}
}
.btnLeftCssLoop {
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);
}
}
.imagesCssLoop {
width: 100%;
height: 100%;
display: flex;
flex-shrink: 0;
> img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
js Code
let _imagesWrapperDefLoop = document.querySelectorAll(".freshSwiperDefLoop");
let freshWrapperDefLoop = document.querySelector(".freshWrapperDefLoop");
const btnRightDefaultLoop = document.getElementById("btnRightDefaultLoop");
const btnLeftDefaultLoop = document.getElementById("btnLeftDefaultLoop");
const TimeSpeedDefLoop = 1500;
btnRightDefaultLoop.classList.add("btnRightCssLoop");
btnLeftDefaultLoop.classList.add("btnLeftCssLoop");
freshWrapperDefLoop.classList.add("wraperDefLoop");
_imagesWrapperDefLoop.forEach((imageWrap) => {
imageWrap.classList.add("imagesCssLoop");
});
let flagRightDefLoop = 0;
let transRightNumbDefLoop = 0;
let flagRightClickDefLoop = 0;
btnRightDefaultLoop.addEventListener("click", () => {
if (flagRightClickDefLoop == _imagesWrapperDefLoop.length - 1) {
btnRightDefaultLoop.removeEventListener("click", () => {});
} else {
flagRightClickDefLoop++;
transRightNumbDefLoop = transRightNumbDefLoop + flagRightDefLoop - 100;
_imagesWrapperDefLoop.forEach((item) => {
item.style.transition = "0.5s all";
item.style.transform = `translateX(${transRightNumbDefLoop}%)`;
});
}
});
let flagLeftClickDefLoop = 0;
let flagLeftDefLoop = 0;
btnLeftDefaultLoop.addEventListener("click", () => {
// if click
flagRightClickDefLoop--;
flagLeftClickDefLoop++;
// if click too much and dont have picture
if (flagRightClickDefLoop < 0) {
btnLeftDefaultLoop.removeEventListener("click", () => {});
flagRightClickDefLoop = 0;
flagLeftClickDefLoop = 0;
transRightNumbDefLoop = 0;
} else {
transRightNumbDefLoop = transRightNumbDefLoop + flagLeftDefLoop + 100;
_imagesWrapperDefLoop.forEach((item) => {
item.style.transition = "0.5s all";
item.style.transform = `translateX(${transRightNumbDefLoop}%)`;
});
}
});
let goToRightLoop = true;
let stateLoop = true;
setInterval(() => {
if (goToRightLoop == true) {
if (stateLoop) {
btnRightDefaultLoop.click();
if (flagRightClickDefLoop === _imagesWrapperDefLoop.length - 1) {
stateLoop = false;
}
} else {
goToRightLoop = false;
}
} else {
// click on left
btnLeftDefaultLoop.click();
// click when image not exist
if (transRightNumbDefLoop == 0) {
goToRightLoop = true;
stateLoop = true;
}
}
}, TimeSpeedDefLoop);