Carousel Slider Loop
codes you should have for slider working
HtML Code
<div class="freshWrapperCarouselSliderLp rounded-3xl mt-10">
<!-- btn right -->
<img
id="btnRightCarouselSliderLp"
class="btnRightCarouselSliderLp"
src="docs/images/btnRight.png"
alt="#"
/>
<!-- btn left -->
<img
id="btnLeftCarouselSliderLp"
class="btnLeftCarouselSliderLp"
src="docs/images/btnLeft.png"
alt="#"
/>
<!------------------ slide 1 ------------------>
<div
class="freshSwiperCarouselSliderLp CarouselSliderLp1 duration-500"
data-tartib="1"
>
<img src="docs/images/slide1.png" alt="" />
</div>
<!------------------ slide 2 ------------------>
<div
class="freshSwiperCarouselSliderLp CarouselSliderLp2 duration-500"
data-tartib="2"
>
<img src="docs/images/slide2.jpg" alt="" />
</div>
<!------------------ slide 3 ------------------>
<div
class="freshSwiperCarouselSliderLp CarouselSliderLp3 duration-500"
data-tartib="3"
>
<img src="docs/images/slide3.png " alt="" />
</div>
</div>
css Code
.wraperCarouselSliderLp {
width: 85%;
height: 500px;
margin: 0 auto;
border: 1px solid #ffffff1a;
background-color: rgba(255, 255, 255, 0.089);
display: flex;
flex-wrap: nowrap;
overflow: hidden;
position: relative;
transform-style: preserve-3d;
display: flex;
align-items: center;
padding-inline: 5%;
}
.btnRightCssCarouselSliderLp {
width: 50px;
height: 50px;
position: absolute;
z-index: 10;
right: 4px;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
transition: 0.7s all;
&:hover {
transform: translateY(-50%) scale(1.2);
}
}
.btnLeftCssCarouselSliderLp {
width: 50px;
height: 50px;
position: absolute;
z-index: 10;
left: 4px;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
transition: 0.7s all;
&:hover {
transform: translateY(-50%) scale(1.2);
}
}
.imagesCssCarouselSliderLp {
width: 35%;
height: 60%;
display: flex;
flex-shrink: 0;
> img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
@media screen and (max-width: 700px) {
.CarouselSliderLp2 {
height: 25% !important;
width: 30% !important;
}
.imagesCssCarouselSliderLp {
height: 30% !important;
}
}
.CarouselSliderLp1 {
transform: perspective(900px) translateZ(-100px);
position: absolute;
left: 2%;
transition: 2s all;
z-index: 5;
}
.CarouselSliderLp2 {
transform: perspective(900px);
z-index: 3;
position: absolute;
scale: 1.5;
left: 60%;
transform: translateX(-50%);
transition: 2s all;
z-index: 20;
}
.CarouselSliderLp3 {
transform: perspective(900px) translateZ(-100px);
position: absolute;
left: 63%;
transition: 2s all;
z-index: 3;
}
js Code
let _imagesWrapperCarouselSliderLp = document.querySelectorAll(
".freshSwiperCarouselSliderLp"
);
let freshWrapperCarouselSliderLp = document.querySelector(
".freshWrapperCarouselSliderLp"
);
const btnRightCarouselSliderLp = document.getElementById(
"btnRightCarouselSliderLp"
);
const btnLeftCarouselSliderLp = document.getElementById(
"btnLeftCarouselSliderLp"
);
const TimeSpeedCarouselSliderLp = 1800;
btnRightCarouselSliderLp.classList.add("btnRightCssCarouselSliderLp");
btnLeftCarouselSliderLp.classList.add("btnLeftCssCarouselSliderLp");
freshWrapperCarouselSliderLp.classList.add("wraperCarouselSliderLp");
_imagesWrapperCarouselSliderLp.forEach((imageWrap) => {
imageWrap.classList.add("imagesCssCarouselSliderLp");
});
let flagRightCarouselSliderLp = 0;
let transRightNumbCarouselSliderLp = 0;
let flagRightClickCarouselSliderLp = 0;
btnRightCarouselSliderLp.addEventListener("click", () => {
let imgCarouselSliderLp1 = document.querySelector(".CarouselSliderLp1");
let imgCarouselSliderLp2 = document.querySelector(".CarouselSliderLp2");
let imgCarouselSliderLp3 = document.querySelector(".CarouselSliderLp3");
let dataTartibCarouselSliderLp1 =
imgCarouselSliderLp1.getAttribute("data-tartib");
let dataTartibCarouselSliderLp2 =
imgCarouselSliderLp2.getAttribute("data-tartib");
let dataTartibCarouselSliderLp3 =
imgCarouselSliderLp3.getAttribute("data-tartib");
if (dataTartibCarouselSliderLp2 == 2) {
imgCarouselSliderLp2.classList.remove("CarouselSliderLp2");
imgCarouselSliderLp2.classList.add("CarouselSliderLp1");
imgCarouselSliderLp2.setAttribute("data-tartib", "1");
}
if (dataTartibCarouselSliderLp3 == 3) {
imgCarouselSliderLp3.classList.remove("CarouselSliderLp3");
imgCarouselSliderLp3.classList.add("CarouselSliderLp2");
imgCarouselSliderLp3.setAttribute("data-tartib", "2");
}
if (dataTartibCarouselSliderLp1 == 1) {
imgCarouselSliderLp1.classList.remove("CarouselSliderLp1");
imgCarouselSliderLp1.classList.add("CarouselSliderLp3");
imgCarouselSliderLp1.setAttribute("data-tartib", "3");
}
});
btnLeftCarouselSliderLp.addEventListener("click", () => {
let imgCarouselSliderLp1 = document.querySelector(".CarouselSliderLp1");
let imgCarouselSliderLp2 = document.querySelector(".CarouselSliderLp2");
let imgCarouselSliderLp3 = document.querySelector(".CarouselSliderLp3");
let dataTartibCarouselSliderLp1 =
imgCarouselSliderLp1.getAttribute("data-tartib");
let dataTartibCarouselSliderLp2 =
imgCarouselSliderLp2.getAttribute("data-tartib");
let dataTartibCarouselSliderLp3 =
imgCarouselSliderLp3.getAttribute("data-tartib");
if (dataTartibCarouselSliderLp2 == 2) {
imgCarouselSliderLp2.classList.remove("CarouselSliderLp2");
imgCarouselSliderLp2.classList.add("CarouselSliderLp3");
imgCarouselSliderLp2.setAttribute("data-tartib", "3");
}
if (dataTartibCarouselSliderLp3 == 3) {
imgCarouselSliderLp3.classList.remove("CarouselSliderLp3");
imgCarouselSliderLp3.classList.add("CarouselSliderLp1");
imgCarouselSliderLp3.setAttribute("data-tartib", "1");
}
if (dataTartibCarouselSliderLp1 == 1) {
imgCarouselSliderLp1.classList.remove("CarouselSliderLp1");
imgCarouselSliderLp1.classList.add("CarouselSliderLp2");
imgCarouselSliderLp1.setAttribute("data-tartib", "2");
}
});
setInterval(() => {
btnRightCarouselSliderLp.click();
}, TimeSpeedCarouselSliderLp);