Default Slider
codes you should have for slider working
HtML Code
<div class="freshWrapperDef mt-10 relative">
<!-- btn right -->
<img
id="btnRightDefault"
class="btnRightCss"
src="docs/images/btnRight.png"
alt="#"
/>
<!-- btn left -->
<img
id="btnLeftDefault"
class="btnLeftCss"
src="docs/images/btnLeft.png"
alt="#"
/>
<!------------------ slide 1 ------------------>
<div class="freshSwiperDef">
<img src="docs/images/slide1.png" alt="" />
</div>
<!------------------ slide 2 ------------------>
<div class="freshSwiperDef">
<img src="docs/images/slide2.jpg" alt="" />
</div>
<!------------------ slide 3 ------------------>
<div class="freshSwiperDef">
<img src="docs/images/slide3.png" alt="" />
</div>
<!------------------ slide 4 ------------------>
<div class="freshSwiperDef">
<img src="docs/images/slide4.png" alt="" />
</div>
</div>
css Code
.wraperDef {
width: 85%;
height: 500px;
margin: 0 auto;
border: 1px solid #ffffff1a;
background-color: white;
display: flex;
flex-wrap: nowrap;
overflow: hidden;
}
.btnRightCss {
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);
}
}
.btnLeftCss {
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);
}
}
.imagesCss {
width: 100%;
height: 100%;
display: flex;
flex-shrink: 0;
>img{
width: 100%;
height: 100%;
object-fit: cover;
}
}
js Code
// select
let _imagesWrapperDef = document.querySelectorAll(".freshSwiperDef");
let freshWrapperDef = document.querySelector(".freshWrapperDef");
const btnRightDefault = document.getElementById("btnRightDefault");
const btnLeftDefault = document.getElementById("btnLeftDefault");
btnRightDefault.classList.add("btnRightCss");
btnLeftDefault.classList.add("btnLeftCss");
freshWrapperDef.classList.add("wraperDef");
_imagesWrapperDef.forEach((imageWrap)=>{
imageWrap.classList.add("imagesCss")
})
let flagRightDef = 0;
let transRightNumbDef = 0;
let flagRightClickDef = 0;
btnRightDefault.addEventListener("click", () => {
if (flagRightClickDef == _imagesWrapperDef.length - 1) {
btnRightDefault.removeEventListener("click", () => {});
} else {
flagRightClickDef++;
transRightNumbDef = transRightNumbDef + flagRightDef - 100;
_imagesWrapperDef.forEach((item) => {
item.style.transition = "0.5s all";
item.style.transform = `translateX(${transRightNumbDef}%)`;
});
}
});
let flagLeftClickDef = 0;
let flagLeftDef = 0;
btnLeftDefault.addEventListener("click", () => {
// if click
flagRightClickDef--;
flagLeftClickDef++;
// if click too much and dont have picture
if (flagRightClickDef < 0) {
btnLeftDefault.removeEventListener("click", () => {});
flagRightClickDef = 0;
flagLeftClickDef = 0;
transRightNumbDef = 0;
} else {
transRightNumbDef = transRightNumbDef + flagLeftDef + 100;
_imagesWrapperDef.forEach((item) => {
item.style.transition = "0.5s all";
item.style.transform = `translateX(${transRightNumbDef}%)`;
});
}
});