Infinite Image Carousel in Vanilla JS

Infinite Image Carousel in Vanilla JS
Code Snippet:easy infinite Carousel
Author: Milad
Published: January 14, 2024
Last Updated: January 22, 2024
Downloads: 1,734
License: MIT
Edit Code online: View on CodePen
Read More

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.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X