Carousel with Tailwind CSS and Alpine.js

Simple card Carousel

This tailwind example is contributed by Brandon D, on 02-Sep-2022. Component is made with Tailwind v3.4. It is responsive.

Carousel

Author Brandon D

Tailwind v3.4 33.5k 24

Fork Fullscreen

<div class="absolute w-full flex items-center justify-center px-4">
      <template x-for="slide in slides" :key="slide">
        <button
          class="flex-1 w-4 h-2 mt-4 mx-2 mb-0 rounded-full overflow-hidden transition-colors duration-200 ease-out hover:bg-teal-600 hover:shadow-lg"
          :class="{ 
              'bg-orange-600': activeSlide === slide,
              'bg-teal-300': activeSlide !== slide 
          }" 
          x-on:click="activeSlide = slide"
        ></button>
      </template>
    </div>
  </div>
  
  </div>
</div>

Related Examples

Image carousel
Uses Flowbite

Fagundo67

3 years ago

32.3k
Tailwind image slider
slider with navigation buttons and info about image

Anonymous

2 years ago

21.6k
Verticle card grid
Best suited for news websites

Mr Robot

3 years ago

14.4k
3 columns blog section
de columnis, columni, 3 columns

Anonymous

2 years ago

12.9k
Image Carousel

Nikolai

2 years ago

8.1k
Carousel Card Slider Swiper on Alpine.JS
with support drag and drop mouse actions

Maxim

2 years ago

14.3k
hero section fullpage

Leon Bachmann

3 years ago

12k
3D Animated Image Gallery
3D Animated Image Gallery

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

10.1k
Text with gradient underline
Gradient Underline Text. Decorate your text with a gradient underline for a modern touch.

Anonymous

3 years ago

11.6k
Slider
Responsive slider

Abhiraj

1 year ago

3k
3D Coverflow Slider — Ambient Background
A depth-based 3D slider with real perspective and rotateY transforms (not just fade), paired with a drifting polyhedra background that responds to cursor movement. Zero dependencies — pure Tailwind utilities, one config file, and vanilla JS. Auto-plays, pauses on hover, fully keyboard/dot-navigable. Swap the color tokens in the config to reskin it.

Azeem warraich

2 months ago

208
Responsive Image Carousel with Alpine.js
This component is a fully responsive image carousel/slider that displays: 1 slide at a time on mobile devices (screen width < 768px) 3 slides at a time on desktop (screen width ≥ 768px)

Salah eldein

1 year ago

808