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:

react toastify

React-Toastify (2025 update): Setup, styling & real-world use cases

Learn how to use React-Toastify in 2025, from setup to styling and advanced use cases like API notifications, async toasts, and React-Toastify 11 updates.

Chimezie Innocent
Apr 18, 2025 â‹… 18 min read
5 Best Open Source Tools For Cross-Browser CSS Testing

5 best open source tools for cross-browser CSS testing

Discover open source tools for cross-browser CSS testing like Playwright and BrowserStack to catch rendering errors, inconsistent styling, and more.

Peter Aideloje
Apr 18, 2025 â‹… 11 min read
react suspense data fetching

How to handle data fetching with React Suspense

With the introduction of React Suspense, handling asynchronous operations like data fetching has become more efficient and declarative.

Ovie Okeh
Apr 18, 2025 â‹… 10 min read
Use TypeScript Instead Of Python For ETL Pipelines

Use TypeScript instead of Python for ETL pipelines

Build a TypeScript ETL pipeline that extracts, transforms, and loads data using Prisma, node-cron, and modern async/await practices.

Muhammed Ali
Apr 17, 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