How to Create an Image Carousel with Slide Number Counter Using Tailwind CSS and Alpine.js

Building an Interactive Image Carousel

Image carousels are a popular way to showcase multiple images in a compact, interactive format. In this tutorial, we’ll build a fully functional carousel with smooth transitions, navigation buttons, a slide counter, and dot indicators—all using Alpine.js and Tailwind CSS.

What You’ll Learn

• How to set up Alpine.js state management for carousel functionality
• Creating smooth opacity transitions between slides
• Building navigation buttons (previous/next)
• Adding a slide counter display
• Implementing dot indicators for direct navigation
• Best practices for accessibility

The HTML & Tailwind Structure

Here’s the complete carousel code.

Breaking Down the Code

1. The Carousel Container

<div class="relative w-full overflow-hidden bg-base-100 rounded-2xl"></div>

• relative: Establishes a positioning context for absolute elements inside
• overflow-hidden: Clips any content that extends beyond the carousel bounds
• rounded-2xl: Adds rounded corners for a modern look

2. Slides Container

<div class="relative w-full h-96 md:h-[500px]"></div>

• Sets the carousel height (h-96 on mobile, h-[500px] on larger screens)
• relative positioning allows child images to be positioned absolutely

3. Individual Slides

<template x-for="(slide, index) in slides" :key="index">
  <div
    :class="currentSlide === index ? 'opacity-100' : 'opacity-0'"
    class="absolute inset-0 transition-opacity duration-500 ease-in-out"
  ></div
></template>

• x-for: Alpine loops through each slide
• :class binding: Shows the current slide at opacity-100, hides others at opacity-0
• transition-opacity duration-500: Creates a smooth fade effect over 500ms
• inset-0: Positions the image to fill the entire container

4. Image with Dynamic Sources

<img
  :src="slide === 0 ? 'url1' : slide === 1 ? 'url2' : 'url3'"
  class="w-full h-full object-cover"
/>

• Uses ternary operators to load different images based on the slide index
• object-cover: Ensures the image fills the container without distortion

5. Navigation Buttons

<div class="absolute left-0 top-1/2 -translate-y-1/2 z-20"></div>

• absolute left-0 top-1/2: Positions the button on the left edge, vertically centered
• -translate-y-1/2: Offsets it by -50% to perfectly center it
• z-20: Ensures buttons appear above the images
• @click="prev()" and @click="next()": Triggers navigation functions

6. Slide Counter

<div
  class="absolute top-4 right-4 z-20 px-3 py-2 bg-black/50 text-white text-sm font-medium rounded-full"
>
  <span x-text="currentSlide + 1"></span> / <span x-text="slides"></span>
</div>

• Displays the current slide number and total slides
• bg-black/50: Semi-transparent black background
• rounded-full: Pill-shaped container
• currentSlide + 1: Shows 1-based indexing (1, 2, 3…) instead of 0-based

7. Dot Indicators

<template x-for="(slide, index) in slides" :key="index">
  <button
    @click="goToSlide(index)"
    :class="currentSlide === index ? 'bg-accent-500' : 'bg-base-300 hover:bg-base-400'"
    class="w-3 h-3 rounded-full transition-colors duration-200"
  ></button
></template>

• Loops through slides creating a dot for each
• Active dot: bg-accent-500 (highlighted color)
• Inactive dots: bg-base-300 with hover state
• @click="goToSlide(index)": Jump directly to any slide
• rounded-full: Creates perfect circles

Alpine.js State Management

To make this work, you need Alpine.js data:

x-data="{
  currentSlide: 0,
  slides: 3,
  next() {
    this.currentSlide = (this.currentSlide + 1) % this.slides;
  },
  prev() {
    this.currentSlide = (this.currentSlide - 1 + this.slides) % this.slides;
  },
  goToSlide(index) {
    this.currentSlide = index;
  }
}"

• currentSlide: Tracks which slide is being displayed
• slides: Total number of slides (3 in this example)
• next(): Moves to the next slide, wrapping around to the first if at the end
• prev(): Moves to the previous slide, wrapping to the last if at the beginning
• goToSlide(index): Jumps directly to a specific slide

Key Features Explained

Smooth Transitions: The transition-opacity duration-500 ease-in-out class creates a fade effect over 500 milliseconds.

Responsive Height: Uses Tailwind’s responsive classes (h-96 md:h-[500px]) to adjust carousel height on different screen sizes.

Accessibility: Includes aria-label, aria-current, and proper semantic HTML for screen readers.

Circular Navigation: The modulo operator (%) ensures the carousel loops—going forward from the last slide returns to the first, and vice versa.

Customization Ideas

• Change duration-500 to duration-300 for faster transitions
• Modify image URLs to use your own images or dynamic data
• Add auto-play by using setInterval() to call next() automatically
• Replace opacity transitions with CSS transforms for slide animations
• Add keyboard navigation with arrow keys
• Include swipe gestures for mobile devices

This carousel is production-ready and works great for portfolios, product showcases, testimonials, and hero sections. Enjoy!

Complete Code

<!-- Carousel Container -->
<div class="relative w-full overflow-hidden bg-base-100 rounded-2xl">
  <!-- Slides -->
  <div class="relative w-full h-96 md:h-[500px]">
    <template x-for="(slide, index) in slides" :key="index">
      <div
        :class="currentSlide === index ? 'opacity-100' : 'opacity-0'"
        class="absolute inset-0 transition-opacity duration-500 ease-in-out"
      >
        <img
          :src="slide === 0 ? 'https://images.unsplash.com/photo-1570129477492-45c003edd2be?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=2070' : slide === 1 ? 'https://plus.unsplash.com/premium_photo-1733760125497-cd51a05afc6c?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=2071' : 'https://plus.unsplash.com/premium_photo-1733760125031-62a1611f02db?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=2071'"
          :alt="slide === 0 ? 'Blue Aurora' : slide === 1 ? 'Blue Blob' : 'Gradient Animation'"
          class="w-full h-full object-cover"
        />
      </div>
    </template>
  </div>

  <!-- Navigation Buttons -->
  <div class="absolute left-0 top-1/2 -translate-y-1/2 z-20">
    <button
      variant="muted"
      size="md"
      iconOnly
      @click="prev()"
      aria-label="Previous slide"
      class="rounded-r-lg rounded-l-none"
    >
      <fragment slot="icon">
        <svg
          class="w-5 h-5"
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M15 19l-7-7 7-7"
          ></path>
        </svg>
      </fragment>
    </button>
  </div>

  <div class="absolute right-0 top-1/2 -translate-y-1/2 z-20">
    <button
      variant="muted"
      size="md"
      iconOnly
      @click="next()"
      aria-label="Next slide"
      class="rounded-l-lg rounded-r-none"
    >
      <fragment slot="icon">
        <svg
          class="w-5 h-5"
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M9 5l7 7-7 7"
          ></path>
        </svg>
      </fragment>
    </button>
  </div>

  <!-- Slide Counter -->
  <div
    class="absolute top-4 right-4 z-20 px-3 py-2 bg-black/50 text-white text-sm font-medium rounded-full"
  >
    <span x-text="currentSlide + 1"></span> / <span x-text="slides"></span>
  </div>
</div>

<!-- Dot Indicators -->
<div class="flex justify-center gap-2 mt-6">
  <template x-for="(slide, index) in slides" :key="index">
    <button
      @click="goToSlide(index)"
      :class="currentSlide === index ? 'bg-accent-500' : 'bg-base-300 hover:bg-base-400'"
      class="w-3 h-3 rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-accent-500 focus:ring-offset-2"
      :aria-label="`Go to slide ${index + 1}`"
      :aria-current="currentSlide === index"
    ></button>
  </template>
</div>