Carousel Slider 7 Images
codes you should have for slider working
HtML Code
<div class="freshWrapperCarouselSliderFive rounded-3xl mt-10">
<!-- btn right -->
<img
id="btnRightCarouselSliderFive"
class="btnRightCarouselSliderFive"
src="docs/images/btnRight.png"
alt="#"
/>
<!-- btn left -->
<img
id="btnLeftCarouselSliderFive"
class="btnLeftCarouselSliderFive"
src="docs/images/btnLeft.png"
alt="#"
/>
<!------------------ slide -4 ------------------>
<div
class="freshSwiperCarouselSliderFive CarouselSliderFiveMinus4 duration-500"
data-tartib="5"
></div>
<!------------------ slide -3 ------------------>
<div
class="freshSwiperCarouselSliderFive CarouselSliderFiveMinus3 duration-500"
data-tartib="6"
></div>
<!------------------ slide -2 ------------------>
<div
class="freshSwiperCarouselSliderFive CarouselSliderFiveMinus2 duration-500"
data-tartib="7"
></div>
<!------------------ slide -1 ------------------>
<div
class="freshSwiperCarouselSliderFive CarouselSliderFiveMinus1 duration-500"
data-tartib="8"
></div>
<!------------------ slide 1 ------------------>
<div
class="freshSwiperCarouselSliderFive CarouselSliderFive1 duration-500"
data-tartib="9"
>
<img src="docs/images/slide1.png" alt="" />
</div>
<!------------------ slide 2 ------------------>
<div
class="freshSwiperCarouselSliderFive CarouselSliderFive2 duration-500"
data-tartib="10"
>
<img src="docs/images/slide2.jpg" alt="" />
</div>
<!------------------ slide 3 ------------------>
<div
class="freshSwiperCarouselSliderFive CarouselSliderFive3 duration-500"
data-tartib="11"
>
<img src="docs/images/slide3.png " alt="" />
</div>
<!------------------ slide 4 ------------------>
<div
class="freshSwiperCarouselSliderFive CarouselSliderFive4 CarouselSliderFiveRHide duration-500"
data-tartib="12"
>
<img src="docs/images/slide4.png" alt="" />
</div>
<!------------------ slide 5 ------------------>
<div
class="freshSwiperCarouselSliderFive CarouselSliderFive5 CarouselSliderFiveRHide duration-500"
data-tartib="13"
>
<img src="docs/images/slide5.jpg" alt="" />
</div>
<!------------------ slide 6 ------------------>
<div
class="freshSwiperCarouselSliderFive CarouselSliderFive6 CarouselSliderFiveRHide duration-500"
data-tartib="14"
>
<img src="docs/images/slide6.jpg" alt="" />
</div>
<!------------------ slide 7 ------------------>
<div
class="freshSwiperCarouselSliderFive CarouselSliderFive7 CarouselSliderFiveRHide duration-500"
data-tartib="15"
>
<img src="docs/images/slide8.jpg" alt="" />
</div>
</div>
css Code
.wraperCarouselSliderFive {
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%;
}
.btnRightCssCarouselSliderFive {
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);
}
}
.btnLeftCssCarouselSliderFive {
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);
}
}
.imagesCssCarouselSliderFive {
width: 35%;
height: 60%;
display: flex;
flex-shrink: 0;
> img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
@media screen and (max-width: 700px) {
.CarouselSliderFive2 {
height: 25% !important;
width: 30% !important;
}
.imagesCssCarouselSliderFive {
height: 30% !important;
}
}
.CarouselSliderFiveMinus4 {
transform: perspective(900px) translateZ(-100px);
position: absolute;
left: -72%;
transition: 2s all;
z-index: 5;
}
.CarouselSliderFiveMinus3 {
transform: perspective(900px) translateZ(-100px);
position: absolute;
left: -72%;
transition: 2s all;
z-index: 5;
}
.CarouselSliderFiveMinus2 {
transform: perspective(900px) translateZ(-100px);
position: absolute;
left: -72%;
transition: 2s all;
z-index: 5;
}
.CarouselSliderFiveMinus1 {
transform: perspective(900px) translateZ(-100px);
position: absolute;
left: -72%;
transition: 2s all;
z-index: 5;
}
/* left */
.CarouselSliderFive1 {
transform: perspective(900px) translateZ(-100px);
position: absolute;
left: 2%;
transition: 2s all;
z-index: 5;
}
/* center */
.CarouselSliderFive2 {
transform: perspective(900px);
z-index: 3;
position: absolute;
scale: 1.5;
left: 60%;
transform: translateX(-50%);
transition: 2s all;
z-index: 20;
}
/* right */
.CarouselSliderFive3 {
transform: perspective(900px) translateZ(-100px);
position: absolute;
left: 63%;
transition: 2s all;
z-index: 3;
}
.CarouselSliderFive4 {
transform: perspective(900px) translateZ(-100px);
position: absolute;
left: 100%;
transition: 2s all;
z-index: 3;
}
.CarouselSliderFive5 {
transform: perspective(900px) translateZ(-100px);
position: absolute;
left: 100%;
transition: 2s all;
z-index: 3;
}
.CarouselSliderFive6 {
transform: perspective(900px) translateZ(-100px);
position: absolute;
left: 100%;
transition: 2s all;
z-index: 3;
}
.CarouselSliderFive7 {
transform: perspective(900px) translateZ(-100px);
position: absolute;
left: 100%;
transition: 2s all;
z-index: 3;
}
.RightHiddenFive {
transform: perspective(900px) translateZ(-100px);
position: absolute;
left: 100%;
transition: 2s all;
z-index: 3;
}
.LeftHiddenFive {
transform: perspective(900px) translateZ(-100px);
position: absolute;
left: -100%;
transition: 2s all;
z-index: 3;
}
js Code
let _imagesWrapperCarouselSliderFive = document.querySelectorAll(
".freshSwiperCarouselSliderFive"
);
let freshWrapperCarouselSliderFive = document.querySelector(
".freshWrapperCarouselSliderFive"
);
const btnRightCarouselSliderFive = document.getElementById(
"btnRightCarouselSliderFive"
);
const btnLeftCarouselSliderFive = document.getElementById(
"btnLeftCarouselSliderFive"
);
const TimeSpeedCarouselSliderFive = 1500;
btnRightCarouselSliderFive.classList.add("btnRightCssCarouselSliderFive");
btnLeftCarouselSliderFive.classList.add("btnLeftCssCarouselSliderFive");
freshWrapperCarouselSliderFive.classList.add("wraperCarouselSliderFive");
_imagesWrapperCarouselSliderFive.forEach((imageWrap) => {
imageWrap.classList.add("imagesCssCarouselSliderFive");
});
let flagRightCarouselSliderFive = 0;
let transRightNumbCarouselSliderFive = 0;
let flagRightClickCarouselSliderFive = 0;
/////////////////////////////////////////////// right click
let flagCount = 0;
btnRightCarouselSliderFive.addEventListener("click", (e) => {
const sliders = document.querySelectorAll(".freshSwiperCarouselSliderFive");
sliders.forEach((slider) => {
let data = parseInt(slider.getAttribute("data-tartib"));
data -= 1;
slider.setAttribute("data-tartib", data);
slider.classList.remove(
"CarouselSliderFiveMinus4",
"CarouselSliderFiveMinus3",
"CarouselSliderFiveMinus2",
"CarouselSliderFiveMinus1",
"CarouselSliderFive1",
"CarouselSliderFive2",
"CarouselSliderFive3",
"CarouselSliderFive4",
"CarouselSliderFive5",
"CarouselSliderFive6",
"CarouselSliderFive7",
"CarouselSliderFiveRHide"
);
if (data <= 5) slider.classList.add("CarouselSliderFiveMinus4");
else if (data == 6) slider.classList.add("CarouselSliderFiveMinus3");
else if (data == 7) slider.classList.add("CarouselSliderFiveMinus2");
else if (data == 8) slider.classList.add("CarouselSliderFiveMinus1");
else if (data == 9) slider.classList.add("CarouselSliderFive1");
else if (data == 10) slider.classList.add("CarouselSliderFive2");
else if (data == 11) slider.classList.add("CarouselSliderFive3");
else if (data == 12) slider.classList.add("CarouselSliderFive4");
else if (data == 13) slider.classList.add("CarouselSliderFive5");
else if (data == 14) slider.classList.add("CarouselSliderFive6");
else if (data == 15) slider.classList.add("CarouselSliderFive7");
else slider.classList.add("CarouselSliderFiveRHide");
});
flagCount += 1;
if (flagCount >= 5) {
btnRightCarouselSliderFive.style.display = "none";
} else {
btnLeftCarouselSliderFive.style.display = "flex";
}
});
/////////////////////////////// left click
btnLeftCarouselSliderFive.addEventListener("click", () => {
const sliders = document.querySelectorAll(".freshSwiperCarouselSliderFive");
sliders.forEach((item) => {
let data = parseInt(item.getAttribute("data-tartib"));
data += 1;
item.setAttribute("data-tartib", data);
item.classList.remove(
"CarouselSliderFiveMinus4",
"CarouselSliderFiveMinus3",
"CarouselSliderFiveMinus2",
"CarouselSliderFiveMinus1",
"CarouselSliderFive1",
"CarouselSliderFive2",
"CarouselSliderFive3",
"CarouselSliderFive4",
"CarouselSliderFive5",
"CarouselSliderFive6",
"CarouselSliderFive7",
"CarouselSliderFiveRHide"
);
if (data <= 5) item.classList.add("CarouselSliderFiveMinus4");
else if (data == 6) item.classList.add("CarouselSliderFiveMinus3");
else if (data == 7) item.classList.add("CarouselSliderFiveMinus2");
else if (data == 8) item.classList.add("CarouselSliderFiveMinus1");
else if (data == 9) item.classList.add("CarouselSliderFive1");
else if (data == 10) item.classList.add("CarouselSliderFive2");
else if (data == 11) item.classList.add("CarouselSliderFive3");
else if (data == 12) item.classList.add("CarouselSliderFive4");
else if (data == 13) item.classList.add("CarouselSliderFive5");
else if (data == 14) item.classList.add("CarouselSliderFive6");
else if (data == 15) item.classList.add("CarouselSliderFive7");
else item.classList.add("RightHiddenFive");
});
flagCount -= 1;
if (flagCount <= -1) {
btnLeftCarouselSliderFive.style.display = "none";
} else {
btnRightCarouselSliderFive.style.display = "flex";
}
});