Carousel Slider
codes you should have for slider working
HtML Code
<div class="freshWrapperCarouselSlider rounded-3xl mt-10">
<!-- btn right -->
<img
id="btnRightCarouselSlider"
class="btnRightCarouselSlider"
src="docs/images/btnRight.png"
alt="#"
/>
<!-- btn left -->
<img
id="btnLeftCarouselSlider"
class="btnLeftCarouselSlider"
src="docs/images/btnLeft.png"
alt="#"
/>
<!------------------ slide 1 ------------------>
<div
class="freshSwiperCarouselSlider CarouselSlider1 duration-500"
data-tartib="1"
>
<img src="docs/images/slide1.png" alt="" />
</div>
<!------------------ slide 2 ------------------>
<div
class="freshSwiperCarouselSlider CarouselSlider2 duration-500"
data-tartib="2"
>
<img src="docs/images/slide2.jpg" alt="" />
</div>
<!------------------ slide 3 ------------------>
<div
class="freshSwiperCarouselSlider CarouselSlider3 duration-500"
data-tartib="3"
>
<img src="docs/images/slide3.png " alt="" />
</div>
</div>
css Code
.wraperCarouselSlider {
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%;
}
.btnRightCssCarouselSlider {
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);
}
}
.btnLeftCssCarouselSlider {
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);
}
}
.imagesCssCarouselSlider {
width: 35%;
height: 60%;
display: flex;
flex-shrink: 0;
> img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
@media screen and (max-width: 700px) {
.CarouselSlider2 {
height: 50% !important;
}
}
.CarouselSlider0 {
transform: perspective(900px) translateZ(-100px);
position: absolute;
left: -70%;
transition: 2s all;
z-index: 5;
}
.CarouselSlider4 {
transform: perspective(900px) translateZ(-100px);
position: absolute;
left: 170%;
transition: 2s all;
z-index: 5;
}
.CarouselSlider1 {
transform: perspective(900px) translateZ(-100px);
position: absolute;
left: 2%;
transition: 2s all;
z-index: 5;
}
.CarouselSlider2 {
transform: perspective(900px);
z-index: 3;
position: absolute;
scale: 1.5;
left: 60%;
transform: translateX(-50%);
transition: 2s all;
z-index: 20;
}
.CarouselSlider3 {
transform: perspective(900px) translateZ(-100px);
position: absolute;
left: 63%;
transition: 2s all;
z-index: 3;
}
js Code
let _imagesWrapperCarouselSlider = document.querySelectorAll(
".freshSwiperCarouselSlider"
);
let freshWrapperCarouselSlider = document.querySelector(
".freshWrapperCarouselSlider"
);
const btnRightCarouselSlider = document.getElementById(
"btnRightCarouselSlider"
);
const btnLeftCarouselSlider = document.getElementById("btnLeftCarouselSlider");
const TimeSpeedCarouselSlider = 1500;
btnRightCarouselSlider.classList.add("btnRightCssCarouselSlider");
btnLeftCarouselSlider.classList.add("btnLeftCssCarouselSlider");
freshWrapperCarouselSlider.classList.add("wraperCarouselSlider");
_imagesWrapperCarouselSlider.forEach((imageWrap) => {
imageWrap.classList.add("imagesCssCarouselSlider");
});
let flagRightCarouselSlider = 0;
let transRightNumbCarouselSlider = 0;
let flagRightClickCarouselSlider = 0;
btnRightCarouselSlider.addEventListener("click", () => {
let imgCarouselSlider1 = document.querySelector(".CarouselSlider1");
let imgCarouselSlider2 = document.querySelector(".CarouselSlider2");
let imgCarouselSlider3 = document.querySelector(".CarouselSlider3");
let dataTartibCarouselSlider1 = imgCarouselSlider1.getAttribute("data-tartib");
let dataTartibCarouselSlider2 = imgCarouselSlider2.getAttribute("data-tartib");
let dataTartibCarouselSlider3 = imgCarouselSlider3.getAttribute("data-tartib");
if (dataTartibCarouselSlider2 == 2) {
imgCarouselSlider2.classList.remove("CarouselSlider2");
imgCarouselSlider2.classList.add("CarouselSlider1");
imgCarouselSlider2.setAttribute("data-tartib", "1");
}
if (dataTartibCarouselSlider3 == 3) {
imgCarouselSlider3.classList.remove("CarouselSlider3");
imgCarouselSlider3.classList.add("CarouselSlider2");
imgCarouselSlider3.setAttribute("data-tartib", "2");
}
if (dataTartibCarouselSlider1 == 1) {
imgCarouselSlider1.classList.remove("CarouselSlider1");
imgCarouselSlider1.classList.add("CarouselSlider3");
imgCarouselSlider1.setAttribute("data-tartib", "3");
}
});
btnLeftCarouselSlider.addEventListener("click", () => {
let imgCarouselSlider1 = document.querySelector(".CarouselSlider1");
let imgCarouselSlider2 = document.querySelector(".CarouselSlider2");
let imgCarouselSlider3 = document.querySelector(".CarouselSlider3");
let dataTartibCarouselSlider1 = imgCarouselSlider1.getAttribute("data-tartib");
let dataTartibCarouselSlider2 = imgCarouselSlider2.getAttribute("data-tartib");
let dataTartibCarouselSlider3 = imgCarouselSlider3.getAttribute("data-tartib");
if (dataTartibCarouselSlider2 == 2) {
imgCarouselSlider2.classList.remove("CarouselSlider2");
imgCarouselSlider2.classList.add("CarouselSlider3");
imgCarouselSlider2.setAttribute("data-tartib", "3");
}
if (dataTartibCarouselSlider3 == 3) {
imgCarouselSlider3.classList.remove("CarouselSlider3");
imgCarouselSlider3.classList.add("CarouselSlider1");
imgCarouselSlider3.setAttribute("data-tartib", "1");
}
if (dataTartibCarouselSlider1 == 1) {
imgCarouselSlider1.classList.remove("CarouselSlider1");
imgCarouselSlider1.classList.add("CarouselSlider2");
imgCarouselSlider1.setAttribute("data-tartib", "2");
}
});