2024-03-14
3566
#vanilla javascript
David Herbert
103328
Mar 14, 2024 â‹… 12 min read

Build an image carousel from scratch with vanilla JavaScript

David Herbert David is a frontend developer by day and a technical writer by night who enjoys breaking down complex topics into comprehensible bits, digestible even by five-year-olds.

Recent posts:

Build A React AI Image Generator With Hugging Face Diffusers

Build a React AI image generator with Hugging Face Diffusers

Build a React-based AI image generator app offline using the Hugging Face Diffusers library and Stable Diffusion XL.

Andrew Baisden
May 29, 2025 â‹… 10 min read
Gemini 2.5 and the future of AI reasoning for frontend devs

Gemini 2.5 and the future of AI reasoning for frontend devs

Get up to speed on Google’s latest breakthrough with the Gemini 2.5 model and what it means for the future of frontend AI tools.

Chizaram Ken
May 29, 2025 â‹… 5 min read
Exploring The Top Rust Web Frameworks

Exploring the top Rust web frameworks

In this article, we’ll explore the best Rust frameworks for web development, including Actix Web, Rocket, Axum, warp, Leptos, Cot, and Loco.

Abiodun Solomon
May 28, 2025 â‹… 11 min read
How To Use The CSS Cursor Property

How to use the CSS cursor property

A single line of CSS can change how users feel about your UI. Learn how to leverage the cursor property to signal intent, improve interaction flow, and elevate accessibility.

Chizaram Ken
May 28, 2025 â‹… 6 min read
View all posts

7 Replies to "Build an image carousel from scratch with vanilla JavaScript"

  1. Useful tutorial! Thanks for sharing. One issue I had is:

    else {
    curSlide-;
    }”

    Should be:

    else {
    curSlide–;
    }”

    Other than that, fantastic job!

  2. nice thanks for sharing
    should have two – on the prev button else statement to fix the issue.
    else {
    curside–;
    }

  3. The following JS script fixes the above issues.

    document.addEventListener(“DOMContentLoaded”, function () {
    // Select all slides
    const slides = document.querySelectorAll(“.slide”);

    // Initialize current slide counter
    let curSlide = 0;

    // Add event listeners for next and previous slide buttons
    const nextSlideBtn = document.querySelector(“.btn-next”);
    const prevSlideBtn = document.querySelector(“.btn-prev”);

    nextSlideBtn.addEventListener(“click”, () => navigateSlides(1));
    prevSlideBtn.addEventListener(“click”, () => navigateSlides(-1));

    // Function to navigate slides
    function navigateSlides(offset) {
    curSlide = (curSlide + offset + slides.length) % slides.length;

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

  4. I was able to get it to work with this code:

    const slides = document.querySelectorAll(“.slide”);

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

    let curSlide = 0;

    let maxSlide = slides.length – 1;

    const nextSlide = document.querySelector(“.btn-next”);

    nextSlide.addEventListener(“click”, function () {
    if (curSlide === maxSlide) {
    curSlide = 0;
    } else {
    curSlide ++;
    }
    slides.forEach((slide, indx) => {
    slide.style.transform = `translateX(${100 * (indx – curSlide)}%)`;
    });
    });

    const prevSlide = document.querySelector(“.btn-prev”);

    prevSlide.addEventListener(“click”, function () {
    if (curSlide === 0) {
    curSlide = maxSlide;
    } else {
    curSlide –;
    }

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

Leave a Reply