jQuery Image Slider

An image slider (also called a carousel) cycles through images or content panels automatically or when the user clicks navigation arrows. Building a slider from scratch with jQuery teaches animation, CSS positioning, and event management — all in one practical project.

How a Basic Slider Works

  Concept:
  ┌─────────────────────────────────────────────┐
  │  [visible window — 600px wide]              │
  └─────────────────────────────────────────────┘
       ↕ overflow: hidden (hides other slides)

  ┌──────┬──────┬──────┬──────┐
  │ Img1 │ Img2 │ Img3 │ Img4 │  ← strip 2400px wide
  └──────┴──────┴──────┴──────┘

  Moving the strip left by 600px shows Img2.
  Moving it left by 1200px shows Img3.

HTML Structure

<div class="slider-wrapper">
    <div class="slider-track">
        <div class="slide"><img src="img1.jpg" alt="Slide 1" /></div>
        <div class="slide"><img src="img2.jpg" alt="Slide 2" /></div>
        <div class="slide"><img src="img3.jpg" alt="Slide 3" /></div>
    </div>
    <button class="prev-btn">&laquo;</button>
    <button class="next-btn">&raquo;</button>
    <div class="dot-nav"></div>
</div>

CSS Setup (Inline Style Approach)

/* .slider-wrapper: position relative, overflow hidden, fixed width */
/* .slider-track: display flex, width = slides × 100% */
/* .slide: flex-shrink 0, width = 100% of wrapper */
/* .prev-btn, .next-btn: position absolute, top 50%, left/right sides */

jQuery Slider Logic

$(document).ready(function() {
    var current    = 0;
    var total      = $(".slide").length;
    var slideWidth = $(".slider-wrapper").width();

    // Build dot navigation
    for (var i = 0; i < total; i++) {
        $(".dot-nav").append("<span class='dot'></span>");
    }
    $(".dot").eq(0).addClass("active");

    function goToSlide(index) {
        $(".slider-track").animate({
            left: -(index * slideWidth)
        }, 500);

        $(".dot").removeClass("active").eq(index).addClass("active");
        current = index;
    }

    // Next button
    $(".next-btn").click(function() {
        var next = (current + 1) % total;
        goToSlide(next);
    });

    // Previous button
    $(".prev-btn").click(function() {
        var prev = (current - 1 + total) % total;
        goToSlide(prev);
    });

    // Dot navigation
    $(document).on("click", ".dot", function() {
        var index = $(".dot").index(this);
        goToSlide(index);
    });

    // Auto-play every 4 seconds
    var autoPlay = setInterval(function() {
        var next = (current + 1) % total;
        goToSlide(next);
    }, 4000);

    // Pause auto-play on hover
    $(".slider-wrapper").hover(
        function() { clearInterval(autoPlay); },
        function() {
            autoPlay = setInterval(function() {
                goToSlide((current + 1) % total);
            }, 4000);
        }
    );
});

Diagram: Slider Navigation Logic

  Slides: [1] [2] [3]   total = 3

  current = 0 → showing Slide 1

  Next clicked:
  next = (0 + 1) % 3 = 1 → go to Slide 2

  Next clicked again:
  next = (1 + 1) % 3 = 2 → go to Slide 3

  Next clicked again:
  next = (2 + 1) % 3 = 0 → go to Slide 1 (wraps)

  Prev from Slide 1:
  prev = (0 - 1 + 3) % 3 = 2 → go to Slide 3 (wraps backward)

Fade Slider (Alternative to Slide Animation)

$(document).ready(function() {
    var current = 0;
    var total   = $(".slide").length;

    $(".slide").hide().eq(0).show();   // show only first slide

    function showSlide(index) {
        $(".slide").eq(current).fadeOut(400);
        $(".slide").eq(index).fadeIn(400);
        current = index;
    }

    $(".next-btn").click(function() {
        showSlide((current + 1) % total);
    });

    $(".prev-btn").click(function() {
        showSlide((current - 1 + total) % total);
    });
});

Using a Plugin — Slick Slider

For production sites, a tested plugin saves time. Slick is the most popular jQuery slider plugin.

// Include Slick CSS and JS, then:
$(document).ready(function() {
    $(".slider-wrapper").slick({
        autoplay:      true,
        autoplaySpeed: 3000,
        dots:          true,
        infinite:      true,
        speed:         500,
        slidesToShow:  1,
        adaptiveHeight: true
    });
});

Keyboard and Touch Accessibility

// Add keyboard arrow key support
$(document).keydown(function(e) {
    if (e.key === "ArrowRight") $(".next-btn").trigger("click");
    if (e.key === "ArrowLeft")  $(".prev-btn").trigger("click");
});

Quick Summary

• A slider works by positioning a wide strip of slides and animating it left or right to show one slide at a time.
• Use the modulo operator (%) to wrap from the last slide back to the first.
• Add dot navigation for visual indication of the current slide.
• Use setInterval for auto-play and clearInterval on hover to pause it.
• For production, use a battle-tested plugin like Slick to save time and handle edge cases.