Simple slider with Tailwind CSS / Alpine.js

Introduction

Responsive slider with Tailwind CSS and Alpine.js features smooth transitions, easy customization, and navigation with previous/next arrows and dots.

Code

<div
  x-data="{ activeSlide: 1, slideCount: 3 }"
  class="overflow-hidden relative"
  x-init="setInterval(() => { activeSlide = activeSlide < slideCount ? activeSlide + 1 : 1 }, 5000)">

  <!-- Slider -->
  <div class="whitespace-nowrap transition-transform duration-500 ease-in-out"
    :style="'transform: translateX(-' + (activeSlide - 1) * 100.5 + '%)'">

    <!-- Item 1 -->
    <div class="inline-block w-full">
      <img src="path/to/img" alt="" />
    </div>
    <!-- Item 2 -->
    <div class="inline-block w-full">
      <img src="path/to/img" alt="" />
    </div>
    <!-- Item 3 -->
    <div class="inline-block w-full">
      <img src="path/to/img" alt="" />
    </div>

  </div>

  <!-- Prev/Next Arrows -->
  <div class="absolute inset-0 flex items-center justify-between px-2">
    <button
      @click="activeSlide = activeSlide > 1 ? activeSlide - 1 : slideCount"
      class="w-[30px] h-[30px] flex items-center bg-black/30 text-white p-2 rounded-full">
      &#8592;
    </button>
    <button
      @click="activeSlide = activeSlide < slideCount ? activeSlide + 1 : 1"
      class="w-[30px] h-[30px] flex items-center bg-black/30 text-white p-2 rounded-full">
      &#8594;
    </button>
  </div>

  <!-- Dots Navigation -->
  <div class="absolute bottom-0 left-0 right-0 flex justify-center space-x-2 p-4">
    <template x-for="slideIndex in slideCount" :key="slideIndex">
      <button
        @click="activeSlide = slideIndex"
        class="h-2 w-2 rounded-full"
        :class="{'bg-orange-500': activeSlide === slideIndex, 'bg-white/50': activeSlide !== slideIndex}">
      </button>
    </template>
  </div>
</div>

Explanation

x-data="{ activeSlide: 1, slideCount: 3 }"

This sets up our slideshow. It says we start with the first slide and have three slides in total.

x-init="setInterval(() => { activeSlide = activeSlide < slideCount ? activeSlide + 1 : 1 }, 5000)"

This makes the slideshow move to the next slide every five seconds. If it's on the last slide, it goes back to the first one. You can remove this line if you don't want your slideshow to autoplay.

:style="'transform: translateX(-' + (activeSlide - 1) * 100.5 + '%)'"

This moves the slides to the left when we switch between them. It makes sure each slide lines up just right on the screen.

@click="activeSlide = activeSlide > 1 ? activeSlide - 1 : slideCount"

This lets you go back one slide when you click. If you're on the first slide and click, it takes you to the last slide.

@click="activeSlide = activeSlide < slideCount ? activeSlide + 1 : 1"

This lets you go forward one slide when you click. If you're on the last slide and click, it takes you to the first slide.

x-for="slideIndex in slideCount" :key="slideIndex"

This creates a button for each slide. These buttons let you click directly to a slide.

:class="{'bg-orange-500': activeSlide === slideIndex, 'bg-white/50': activeSlide !== slideIndex}"

This changes the color of the buttons based on the slide you're viewing. The button for the slide you're on turns orange, and the others are white.

You can access the full code: Simple slider - Tailwind CSS / Alpine.js