Infinite Image Carousel in Vanilla JS

This Vanilla JS code helps you to create a full-width infinite image carousel with captions and navigation controls. It allows you to showcase multiple images in a continuous loop, and you can manually navigate through the images using the next and previous buttons or by clicking on dots below the images. This code is helpful for creating dynamic image sliders on your website, making it visually engaging for your visitors.

How to Create Infinite Image Carousel In Vanilla Js

1. Start by creating the HTML structure for your Infinite Image Carousel. Paste the following code into your HTML file: Replace the placeholder <div> elements with your image slides. Ensure each slide includes an <img>, a .number for slide numbering, and a .text for captions.

<!-- Full-width images with number and caption text -->
<div class="carousel-container">
  <div class="mySlides animate">
    <img src="https://wallpapershome.com/images/pages/pic_h/16239.jpg" alt="slide" />
    <div class="number">1 / 5</div>
    <div class="text">Lorem ipsum dolor sit amet consectetur</div>
  </div>

  <div class="mySlides animate">
    <img src="https://wallpapershome.com/images/pages/pic_h/23525.jpg" alt="slide" />
    <div class="number">2 / 5</div>
    <div class="text">amet consectetur</div>
  </div>

  <div class="mySlides animate">
    <img src="https://wallpapershome.com/images/pages/pic_h/23277.jpg" alt="slide" />
    <div class="number">3 / 5</div>
    <div class="text">Lorem ipsum dolor sit</div>
  </div>

  <div class="mySlides animate">
    <img src="https://wallpapershome.com/images/pages/pic_h/12596.jpg" alt="slide" />
    <div class="number">4 / 5</div>
    <div class="text">Doloribus quo alias reprehenderit</div>
  </div>

  <div class="mySlides animate">
    <img src="https://wallpapershome.com/images/pages/pic_h/23419.jpg" alt="slide" />
    <div class="number">5 / 5</div>
    <div class="text">Reprehenderit</div>
  </div>

  <!-- Next and previous buttons -->
  <a class="prev" onclick="prevSlide()">&#10094;</a>
  <a class="next" onclick="nextSlide()">&#10095;</a>

  <!-- The dots/circles -->
  <div class="dots-container">
    <span class="dots" onclick="currentSlide(1)"></span>
    <span class="dots" onclick="currentSlide(2)"></span>
    <span class="dots" onclick="currentSlide(3)"></span>
    <span class="dots" onclick="currentSlide(4)"></span>
    <span class="dots" onclick="currentSlide(5)"></span>
  </div>
</div>

2. Add the following CSS styles to your stylesheet to make the carousel visually appealing. You can customize the styles according to your design preferences.

:root {
  --primary-color: slategrey;
}

* {
  box-sizing: border-box;
}

body{
  font-family: "@Microsoft YaHei Light";
  background: #fafafa;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.carousel-container {
  border-radius: 30px;
  overflow: hidden;
  max-width: 800px;
  position: relative;
  box-shadow: 0 0 30px -20px #223344;
  margin: auto;
  z-index: 0;
}

/* Hide the images by default */
.mySlides {
  display: none;
}
.mySlides img {
  display: block;
  width: 100%;
}

/* image gradient overlay [optional] */
/*  .mySlides::after {
  content: "";
  position: absolute;
  inset: 0;
    background-image: linear-gradient(-45deg, rgba(110, 0, 255, .1), rgba(70, 0, 255, .2));
} */

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  width: auto;
  padding: 20px;
  color: white;
  font-weight: bold;
  font-size: 24px;
  border-radius: 0 8px 8px 0;
  background: rgba(173, 216, 230, 0.1);
  user-select: none;
}
.next {
  right: 0;
  border-radius: 8px 0 0 8px;
}
.prev:hover,
.next:hover {
  background-color: rgba(173, 216, 230, 0.3);
}

/* Caption text */
.text {
  color: #f2f2f2;
  background-color: rgba(10, 10, 20, 0.1);
  backdrop-filter: blur(6px);
  border-radius: 10px;
  font-size: 20px;
  padding: 8px 12px;
  position: absolute;
  bottom: 60px;
  left: 50%;
  transform: translate(-50%);
  text-align: center;
}

/* Number text (1/3 etc) */
.number {
  color: #f2f2f2;
  font-size: 16px;
  background-color: rgba(173, 216, 230, 0.15);
  backdrop-filter: blur(6px);
  border-radius: 10px;
  padding: 8px 12px;
  position: absolute;
  top: 10px;
  left: 10px;
}
.dots-container {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translate(-50%);
}

/* The dots/bullets/indicators */
.dots {
  cursor: pointer;
  height: 14px;
  width: 14px;
  margin: 0 4px;
  background-color: rgba(173, 216, 230, 0.2);
  backdrop-filter: blur(2px);
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.3s ease;
}
.active,
.dots:hover {
  background-color: rgba(173, 216, 230, 0.8);
}

/* transition animation */
.animate {
  -webkit-animation-name: animate;
  -webkit-animation-duration: 1s;
  animation-name: animate;
  animation-duration: 2s;
}

@keyframes animate {
  from {
    transform: scale(1.1) rotateY(10deg);
  }
  to {
    transform: scale(1) rotateY(0deg);
  }
}

3. Now, let’s add the JavaScript code that powers the carousel. Insert the following JavaScript code at the bottom of your HTML file, just before the closing </body> tag:

let slideIndex = 0;
showSlides();

// Next-previous control
function nextSlide() {
  slideIndex++;
  showSlides();
  timer = _timer; // reset timer
}

function prevSlide() {
  slideIndex--;
  showSlides();
  timer = _timer;
}

// Thumbnail image controlls
function currentSlide(n) {
  slideIndex = n - 1;
  showSlides();
  timer = _timer;
}

function showSlides() {
  let slides = document.querySelectorAll(".mySlides");
  let dots = document.querySelectorAll(".dots");

  if (slideIndex > slides.length - 1) slideIndex = 0;
  if (slideIndex < 0) slideIndex = slides.length - 1;
  
  // hide all slides
  slides.forEach((slide) => {
    slide.style.display = "none";
  });
  
  // show one slide base on index number
  slides[slideIndex].style.display = "block";
  
  dots.forEach((dot) => {
    dot.classList.remove("active");
  });
  
  dots[slideIndex].classList.add("active");
}

// autoplay slides --------
let timer = 7; // sec
const _timer = timer;

// this function runs every 1 second
setInterval(() => {
  timer--;

  if (timer < 1) {
    nextSlide();
    timer = _timer; // reset timer
  }
}, 1000); // 1sec

That’s it! You’ve successfully created an Infinite Image Carousel in Vanilla JavaScript. This engaging feature can enhance the visual appeal of your website and provide an interactive experience for your visitors. Feel free to experiment with different images, captions, and styles to make it uniquely yours.

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.