JS Carousel

JS Carousel with CSS HTML

by Devbuddy Developer

HTML

<div class="carousel-container">
<div class="carousel">
<div class="image"><img loading="lazy" src="https://via.placeholder.com/800x350?text=image1" alt=""></div>
<div class="image"><img loading="lazy" src="https://via.placeholder.com/800x350?text=image2" alt=""></div>
<div class="image"><img loading="lazy" src="https://via.placeholder.com/800x350?text=image3" alt=""></div>
<div class="image"><img loading="lazy" src="https://via.placeholder.com/800x350?text=image4" alt=""></div>
<div class="image"><img loading="lazy" src="https://via.placeholder.com/800x350?text=image5" alt=""></div>
<div class="image"><img loading="lazy" src="https://via.placeholder.com/800x350?text=image6" alt=""></div>
</div>
</div>

<div class="carousel-container">
<div class="carousel">
<div class="image"><img loading="lazy" src="https://via.placeholder.com/800x350?text=image7" alt=""></div>
<div class="image"><img loading="lazy" src="https://via.placeholder.com/800x350?text=image8" alt=""></div>
<div class="image"><img loading="lazy" src="https://via.placeholder.com/800x350?text=image9" alt=""></div>
<div class="image"><img loading="lazy" src="https://via.placeholder.com/800x350?text=image10" alt=""></div>
<div class="image"><img loading="lazy" src="https://via.placeholder.com/800x350?text=image11" alt=""></div>
<div class="image"><img loading="lazy" src="https://via.placeholder.com/800x350?text=image12" alt=""></div>
</div>
</div>

CSS

.carousel-container {
  position: relative;
  flex-grow: 1;
}

.carousel {
  width: 100%;
  max-width: 800px;
  height: 350px;
  position: relative;
  overflow: hidden;
}

.carousel div.image {
  width: 100% !important;
  position: absolute !important;
  transition: all 0.5s;
  max-width: 800px;
  height: 350px;
}

.carousel div.image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carousel-container .btn-carousel {
  position: absolute;
  height: 40px;
  padding: 10px;
  border: none;
  z-index: 10px;
  cursor: pointer;
  background-color: #fff;
  font-size: 18px;
  display: block;
}

.carousel-container .btn-carousel-prev {
  top: 45%;
  left: 2%;
}

.carousel-container .btn-carousel-prev i::before {
  vertical-align: baseline;
}

.carousel-container .btn-carousel-next {
  top: 45%;
  right: 2%;
}

.carousel-container .btn-carousel-next i::before {
  vertical-align: baseline;
}

JavaScript

const carouselContainer = document.querySelectorAll('.carousel-container');
const carouselBtns = document.createElement('div');
carouselBtns.innerHTML = '<button class="btn-carousel btn-carousel-prev"><span>Prev</span></button><button class="btn-carousel btn-carousel-next"><span>Next</span></button>';

for (let i = 0; i < carouselContainer.length; i++) {
	carouselContainer[i].appendChild(carouselBtns.cloneNode(true));
}



const slides = document.querySelectorAll(".carousel .image");



slides.forEach((slide, index) => {
  slide.style.transform = `translateX(${index * 100}%)`;
});

let currentSlide = 0;
let maxSlide = slides.length - 1;

const nextSlide = document.querySelector(".btn-carousel-next");

nextSlide.addEventListener("click", function(){

  if(currentSlide === maxSlide){
    currentSlide = 0;
  } else {
    currentSlide++
  }
  
  slides.forEach((slide, index)=>{
    slide.style.transform = `translateX(${100 * (index - currentSlide)}%)`;
  });
});

const prevSlide = document.querySelector(".btn-carousel-prev");

prevSlide.addEventListener("click", function(){
  if(currentSlide === 0){
    currentSlide = maxSlide
  } else {
    currentSlide--;
  }

  slides.forEach((slide, index)=>{
    slide.style.transform = `translateX(${100 * (index - currentSlide)}%)`;
  });
});