Carousel Slider 7 images Loop
codes you should have for slider working
HtML Code
<!-- Carousel Slider 7 images Loop Html -->
<div class="freshWrapperCarouselSliderSevenLp rounded-3xl mt-10">
<!-- btn right -->
<img
id="btnRightCarouselSliderSevenLp"
class="btnRightCarouselSliderSevenLp"
src="docs/images/btnRight.png"
alt="#"
/>
<!-- btn left -->
<img
id="btnLeftCarouselSliderSevenLp"
class="btnLeftCarouselSliderSevenLp"
src="docs/images/btnLeft.png"
alt="#"
/>
<!------------------ slide -4 ------------------>
<div
class="freshSwiperCarouselSliderSevenLp CarouselSliderSevenLpMinus4 duration-500"
data-tartib="5"
></div>
<!------------------ slide -3 ------------------>
<div
class="freshSwiperCarouselSliderSevenLp CarouselSliderSevenLpMinus3 duration-500"
data-tartib="6"
></div>
<!------------------ slide -2 ------------------>
<div
class="freshSwiperCarouselSliderSevenLp CarouselSliderSevenLpMinus2 duration-500"
data-tartib="7"
></div>
<!------------------ slide -1 ------------------>
<div
class="freshSwiperCarouselSliderSevenLp CarouselSliderSevenLpMinus1 duration-500"
data-tartib="8"
></div>
<!------------------ slide 1 ------------------>
<div
class="freshSwiperCarouselSliderSevenLp CarouselSliderSevenLp1 duration-500"
data-tartib="9"
>
<img src="docs/images/slide1.png" alt="" />
</div>
<!------------------ slide 2 ------------------>
<div
class="freshSwiperCarouselSliderSevenLp CarouselSliderSevenLp2 duration-500"
data-tartib="10"
>
<img src="docs/images/slide2.jpg" alt="" />
</div>
<!------------------ slide 3 ------------------>
<div
class="freshSwiperCarouselSliderSevenLp CarouselSliderSevenLp3 duration-500"
data-tartib="11"
>
<img src="docs/images/slide3.png " alt="" />
</div>
<!------------------ slide 4 ------------------>
<div
class="freshSwiperCarouselSliderSevenLp CarouselSliderSevenLp4 CarouselSliderSevenLpRHide duration-500"
data-tartib="12"
>
<img src="docs/images/slide4.png" alt="" />
</div>
<!------------------ slide 5 ------------------>
<div
class="freshSwiperCarouselSliderSevenLp CarouselSliderSevenLp5 CarouselSliderSevenLpRHide duration-500"
data-tartib="13"
>
<img src="docs/images/slide5.jpg" alt="" />
</div>
<!------------------ slide 6 ------------------>
<div
class="freshSwiperCarouselSliderSevenLp CarouselSliderSevenLp6 CarouselSliderSevenLpRHide duration-500"
data-tartib="14"
>
<img src="docs/images/slide6.jpg" alt="" />
</div>
<!------------------ slide 7 ------------------>
<div
class="freshSwiperCarouselSliderSevenLp CarouselSliderSevenLp7 CarouselSliderSevenLpRHide duration-500"
data-tartib="15"
>
<img src="docs/images/slide8.jpg" alt="" />
</div>
</div>
css Code
.wraperCarouselSliderSevenLp {
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%;
}
.btnRightCssCarouselSliderSevenLp {
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);
}
}
.btnLeftCssCarouselSliderSevenLp {
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);
}
}
.imagesCssCarouselSliderSevenLp {
width: 35%;
height: 60%;
display: flex;
flex-shrink: 0;
> img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
@media screen and (max-width: 700px) {
.CarouselSliderSevenLp2 {
height: 25% !important;
width: 30% !important;
}
.imagesCssCarouselSliderSevenLp {
height: 30% !important;
}
}
.CarouselSliderSevenLpMinus4 {
transform: perspective(900px) translateZ(-100px);
position: absolute;
left: -72%;
transition: 2s all;
z-index: 5;
}
.CarouselSliderSevenLpMinus3 {
transform: perspective(900px) translateZ(-100px);
position: absolute;
left: -72%;
transition: 2s all;
z-index: 5;
}
.CarouselSliderSevenLpMinus2 {
transform: perspective(900px) translateZ(-100px);
position: absolute;
left: -72%;
transition: 2s all;
z-index: 5;
}
.CarouselSliderSevenLpMinus1 {
transform: perspective(900px) translateZ(-100px);
position: absolute;
left: -72%;
transition: 2s all;
z-index: 5;
}
/* left */
.CarouselSliderSevenLp1 {
transform: perspective(900px) translateZ(-100px);
position: absolute;
left: 2%;
transition: 2s all;
z-index: 5;
}
/* center */
.CarouselSliderSevenLp2 {
transform: perspective(900px);
z-index: 3;
position: absolute;
scale: 1.5;
left: 60%;
transform: translateX(-50%);
transition: 2s all;
z-index: 20;
}
/* right */
.CarouselSliderSevenLp3 {
transform: perspective(900px) translateZ(-100px);
position: absolute;
left: 63%;
transition: 2s all;
z-index: 3;
}
.CarouselSliderSevenLp4 {
transform: perspective(900px) translateZ(-100px);
position: absolute;
left: 100%;
transition: 2s all;
z-index: 3;
}
.CarouselSliderSevenLp5 {
transform: perspective(900px) translateZ(-100px);
position: absolute;
left: 100%;
transition: 2s all;
z-index: 3;
}
.CarouselSliderSevenLp6 {
transform: perspective(900px) translateZ(-100px);
position: absolute;
left: 100%;
transition: 2s all;
z-index: 3;
}
.CarouselSliderSevenLp7 {
transform: perspective(900px) translateZ(-100px);
position: absolute;
left: 100%;
transition: 2s all;
z-index: 3;
}
.RightHiddenSevenLp {
transform: perspective(900px) translateZ(-100px);
position: absolute;
left: 100%;
transition: 2s all;
z-index: 3;
}
.LeftHiddenSevenLp {
transform: perspective(900px) translateZ(-100px);
position: absolute;
left: -100%;
transition: 2s all;
z-index: 3;
}
js Code
let _imagesWrapperCarouselSliderSevenLp = document.querySelectorAll(
".freshSwiperCarouselSliderSevenLp"
);
let freshWrapperCarouselSliderSevenLp = document.querySelector(
".freshWrapperCarouselSliderSevenLp"
);
const btnRightCarouselSliderSevenLp = document.getElementById(
"btnRightCarouselSliderSevenLp"
);
const btnLeftCarouselSliderSevenLp = document.getElementById(
"btnLeftCarouselSliderSevenLp"
);
const TimeSpeedCarouselSliderSevenLp = 2000;
btnRightCarouselSliderSevenLp.classList.add("btnRightCssCarouselSliderSevenLp");
btnLeftCarouselSliderSevenLp.classList.add("btnLeftCssCarouselSliderSevenLp");
freshWrapperCarouselSliderSevenLp.classList.add("wraperCarouselSliderSevenLp");
_imagesWrapperCarouselSliderSevenLp.forEach((imageWrap) => {
imageWrap.classList.add("imagesCssCarouselSliderSevenLp");
});
let flagRightCarouselSliderSevenLp = 0;
let transRightNumbCarouselSliderSevenLp = 0;
let flagRightClickCarouselSliderSevenLp = 0;
/////////////////////////////////////////////// right click
let flagCountSevenLp = 0;
btnRightCarouselSliderSevenLp.addEventListener("click", (e) => {
const sliders = document.querySelectorAll(
".freshSwiperCarouselSliderSevenLp"
);
sliders.forEach((slider) => {
let data = parseInt(slider.getAttribute("data-tartib"));
data -= 1;
slider.setAttribute("data-tartib", data);
slider.classList.remove(
"CarouselSliderSevenLpMinus4",
"CarouselSliderSevenLpMinus3",
"CarouselSliderSevenLpMinus2",
"CarouselSliderSevenLpMinus1",
"CarouselSliderSevenLp1",
"CarouselSliderSevenLp2",
"CarouselSliderSevenLp3",
"CarouselSliderSevenLp4",
"CarouselSliderSevenLp5",
"CarouselSliderSevenLp6",
"CarouselSliderSevenLp7",
"CarouselSliderSevenLpRHide"
);
if (data <= 5) slider.classList.add("CarouselSliderSevenLpMinus4");
else if (data == 6) slider.classList.add("CarouselSliderSevenLpMinus3");
else if (data == 7) slider.classList.add("CarouselSliderSevenLpMinus2");
else if (data == 8) slider.classList.add("CarouselSliderSevenLpMinus1");
else if (data == 9) slider.classList.add("CarouselSliderSevenLp1");
else if (data == 10) slider.classList.add("CarouselSliderSevenLp2");
else if (data == 11) slider.classList.add("CarouselSliderSevenLp3");
else if (data == 12) slider.classList.add("CarouselSliderSevenLp4");
else if (data == 13) slider.classList.add("CarouselSliderSevenLp5");
else if (data == 14) slider.classList.add("CarouselSliderSevenLp6");
else if (data == 15) slider.classList.add("CarouselSliderSevenLp7");
else slider.classList.add("CarouselSliderSevenLpRHide");
});
flagCountSevenLp += 1;
if (flagCountSevenLp >= 5) {
btnRightCarouselSliderSevenLp.style.display = "none";
} else {
btnLeftCarouselSliderSevenLp.style.display = "flex";
}
});
/////////////////////////////// left click
btnLeftCarouselSliderSevenLp.addEventListener("click", () => {
const sliders = document.querySelectorAll(
".freshSwiperCarouselSliderSevenLp"
);
sliders.forEach((item) => {
let data = parseInt(item.getAttribute("data-tartib"));
data += 1;
item.setAttribute("data-tartib", data);
item.classList.remove(
"CarouselSliderSevenLpMinus4",
"CarouselSliderSevenLpMinus3",
"CarouselSliderSevenLpMinus2",
"CarouselSliderSevenLpMinus1",
"CarouselSliderSevenLp1",
"CarouselSliderSevenLp2",
"CarouselSliderSevenLp3",
"CarouselSliderSevenLp4",
"CarouselSliderSevenLp5",
"CarouselSliderSevenLp6",
"CarouselSliderSevenLp7",
"CarouselSliderSevenLpRHide"
);
if (data <= 5) item.classList.add("CarouselSliderSevenLpMinus4");
else if (data == 6) item.classList.add("CarouselSliderSevenLpMinus3");
else if (data == 7) item.classList.add("CarouselSliderSevenLpMinus2");
else if (data == 8) item.classList.add("CarouselSliderSevenLpMinus1");
else if (data == 9) item.classList.add("CarouselSliderSevenLp1");
else if (data == 10) item.classList.add("CarouselSliderSevenLp2");
else if (data == 11) item.classList.add("CarouselSliderSevenLp3");
else if (data == 12) item.classList.add("CarouselSliderSevenLp4");
else if (data == 13) item.classList.add("CarouselSliderSevenLp5");
else if (data == 14) item.classList.add("CarouselSliderSevenLp6");
else if (data == 15) item.classList.add("CarouselSliderSevenLp7");
else item.classList.add("RightHiddenSevenLp");
});
flagCountSevenLp -= 1;
if (flagCountSevenLp <= -1) {
btnLeftCarouselSliderSevenLp.style.display = "none";
} else {
btnRightCarouselSliderSevenLp.style.display = "flex";
}
});
let flagLoopInt = 0;
let flagLoopBoolean = true;
setInterval(() => {
if (flagLoopBoolean == true) {
flagLoopInt++;
if (flagLoopInt <= 5) {
btnRightCarouselSliderSevenLp.click();
} else {
flagLoopBoolean = false;
}
} else {
flagLoopInt--;
if (flagLoopInt >= 0) {
btnLeftCarouselSliderSevenLp.click();
} else {
flagLoopBoolean = true;
}
}
}, TimeSpeedCarouselSliderSevenLp);