Building a Carousel with Vanilla JavaScript

Building a Carousel with Vanilla JavaScript

Last Updated : 06 Jan, 2025

A carousel, also known as an image slider, is a popular web component that allows users to cycle through a series of images, texts, or other content. we'll walk you through creating a responsive carousel using Vanilla JavaScript, HTML, and CSS without relying on any external libraries.

What We Are Going to Create

Basic Carousel: Use HTML to structure the images and CSS for layout and responsiveness.
Navigation Buttons: Add "Previous" and "Next" buttons to manually move through images.
Auto Play: Implement JavaScript to automatically cycle through images at intervals.
Styling: Use CSS to enhance the appearance with borders, shadows, transitions, and ensure responsiveness.

Project Preview

Carousel Application - HTML & CSS Structure

The first step in building a carousel is to define its HTML & CSS structure. We'll need a container for the carousel, individual images, and navigation buttons for the user to move between the images.

HTML

<html>
<head>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background: #f4f4f4;
        }
        .car {
            position: relative;
            width: 80%;
            max-width: 600px;
            overflow: hidden;
        }
        .img-wrap {
            display: flex;
            transition: transform 0.5s ease;
        }
        .img-wrap img {
            width: 100%;
            height: auto;
        }
        .btn {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(0, 0, 0, 0.5);
            color: #fff;
            border: none;
            padding: 10px;
            font-size: 16px;
            cursor: pointer;
        }
        .btn:hover {
            background: rgba(0, 0, 0, 0.8);
        }
        .prev {
            left: 10px;
        }
        .next {
            right: 10px;
        }
    </style>
</head>
<body>
    <div class="car">
        <div class="img-wrap">
            <img src="https://media.geeksforgeeks.org/wp-content/uploads/20241228102812942963/0_ilw552fVUGbwIzbE.jpg"
                alt="1">
            <img src="https://media.geeksforgeeks.org/wp-content/uploads/20241128161121752603/what-is-javascript.webp"
                alt="2">
            <img src="https://media.geeksforgeeks.org/wp-content/uploads/20240829155421/Amazing-new-Javascript-features-in-ES15.webp"
                alt="3">
        </div>
        <button class="btn prev">‹</button>
        <button class="btn next">›</button>
    </div>
</body>
</html>

In this example

Body: Center content both vertically and horizontally, with a light background and no margin/padding.
Carousel: Restrict width to 80% with a max of 600px, and hide any overflow.
Image Wrapper: Arrange images in a row using flex, with smooth transition on transformation.
Images: Set images to take full width, keeping their aspect ratio intact.
Buttons: Position buttons (prev/next) in the center vertically, with semi-transparent background.
Button Hover: Darken button background on hover for better visibility.
Prev Button: Position the previous button to the left.
Next Button: Position the next button to the right.

Carousel - JavaScript Functionality

we add the functionality for navigating between images, as well as autoplay that switches the images automatically.

JavaScript

const prev = document.querySelector('.prev');
const next = document.querySelector('.next');
const wrap = document.querySelector('.img-wrap');
const imgs = document.querySelectorAll('.img-wrap img');

let idx = 0;

function showImg() {
    if (idx >= imgs.length) idx = 0;
    if (idx < 0) idx = imgs.length - 1;
    wrap.style.transform = `translateX(-${idx * 100}%)`;
}

next.addEventListener('click', () => {
    idx++;
    showImg();
});

prev.addEventListener('click', () => {
    idx--;
    showImg();
});

setInterval(() => {
    idx++;
    showImg();
}, 3000);

showImg();

In this example

prev and next buttons for navigation are selected using querySelector.
wrap refers to the container for the images.
imgs holds all the individual images inside the wrap.
idx is a variable to keep track of the currently displayed image.
If idx is greater than or equal to the number of images, reset it to 0.
If idx is less than 0, reset it to the last image index.
Moves the wrap by updating its transform style to shift images horizontally based on the current idx.
Next Button: Increments idx and calls showImg() to display the next image.
Previous Button: Decrements idx and calls showImg() to display the previous image.
Uses setInterval to increment idx every 3000ms (3 seconds) and updates the displayed image via showImg().

Complete Code

HTML

<html>
<head>
    <title>Vanilla JavaScript Carousel</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background: #f4f4f4;
        }
        .car {
            position: relative;
            width: 80%;
            max-width: 600px;
            overflow: hidden;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
        .img-wrap {
            display: flex;
            transition: transform 0.5s ease;
        }

        .img-wrap img {
            width: 100%;
            height: auto;
            flex-shrink: 0;
        }
        .btn {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(0, 0, 0, 0.5);
            color: #fff;
            border: none;
            padding: 10px;
            font-size: 16px;
            cursor: pointer;
            border-radius: 50%;
        }

        .btn:hover {
            background: rgba(0, 0, 0, 0.8);
        }

        .prev {
            left: 10px;
        }

        .next {
            right: 10px;
        }
    </style>
</head>
<body>
    <div class="car">
        <div class="img-wrap">
            <img src="https://media.geeksforgeeks.org/wp-content/uploads/20241228102812942963/0_ilw552fVUGbwIzbE.jpg" alt="Image 1">
            <img src="https://media.geeksforgeeks.org/wp-content/uploads/20241128161121752603/what-is-javascript.webp" alt="Image 2">
            <img src="https://media.geeksforgeeks.org/wp-content/uploads/20240829155421/Amazing-new-Javascript-features-in-ES15.webp" alt="Image 3">
        </div>
        <button class="btn prev">‹</button>
        <button class="btn next">›</button>
    </div>
    <script>
        const prev = document.querySelector('.prev');
        const next = document.querySelector('.next');
        const wrap = document.querySelector('.img-wrap');
        const imgs = document.querySelectorAll('.img-wrap img');
        let idx = 0;
        function showImg() {
            if (idx >= imgs.length) idx = 0;
            if (idx < 0) idx = imgs.length - 1;
            wrap.style.transform = `translateX(-${idx * 100}%)`;
        }
        next.addEventListener('click', () => {
            idx++;
            showImg();
        });

        prev.addEventListener('click', () => {
            idx--;
            showImg();
        });
        setInterval(() => {
            idx++;
            showImg();
        }, 3000);
        showImg();
    </script>
</body>
</html>

Building a Carousel with Vanilla JavaScript

T

tanmxcwi

Improve

Article Tags :

Similar Reads

What is Vanilla JavaScript ?

Vanilla JavaScript refers to using pure JavaScript without relying on any additional libraries or frameworks. Itâ€™s the basic, straightforward form of JavaScript, often referred to as "plain" JavaScript. Simple and lightweightDirect interaction with DOMFlexibility and CustomizableWhy â€œVanillaâ€?The te

Create an Autoplay Carousel using HTML CSS and JavaScript

An Autoplay Carousel is a dynamic UI element that automatically cycles through a series of images or content slides, providing a visually engaging way to display information. It enhances user experience by showcasing multiple items in a limited space without manual navigation. This can be implemente

Automatic Image Slider using JavaScript

In this article, we will discuss how to create an automatic image slider using JavaScript. An image slider is a popular component of modern websites that allows the display of multiple images in a single location, usually in a sliding motion. With the use of JavaScript, creating an automatic image s

Animated Slideshow App in HTML CSS & JavaScript

We will learn to create a slideshow of multiple images. This slideshow will transition between the images every few seconds. we will further learn to align the images, style the images, and make the animation look better.PrerequisitesHTMLCSSJSApproachCreate 3 files one for HTML, one for CSS, and one

Create A Draggable Card Slider in HTML CSS & JavaScript

In this article, we will demonstrate how to create a draggable card slider using HTML, CSS, and JavaScript. We'll use a GeeksforGeeks card slider as an example and implement the functionality to slide cards left and right using arrow buttons. Additionally, we'll incorporate the draggable option, all