Home
Brandon D
Carousel with Tailwind CSS and Alpine.js

87

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 CSS v3. It is responsive.

Carousel

Author Brandon D

29.9k

18

Fork Fullscreen

<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v1.9.5/dist/alpine.js"></script>

<div class="bg-teal-100 h-screen flex flex-col justify-center items-center">
  
  <div 
    class="max-w-4xl mx-auto relative"
    x-data="{ activeSlide: 1, slides: [1, 2, 3, 4, 5] }"
   >
    
    <template x-for="slide in slides" :key="slide">
      <div
         x-show="activeSlide === slide"
         class="p-24 font-bold text-5xl h-64 flex items-center bg-teal-500 text-white rounded-lg">
        <span class="w-12 text-center" x-text="slide"></span>
        <span class="text-teal-300">/</span>
        <span class="w-12 text-center" x-text="slides.length"></span>
      </div>
    </template>
    
    
    <div class="absolute inset-0 flex">
      <div class="flex items-center justify-start w-1/2">
        <button 
          class="bg-teal-100 text-teal-500 hover:text-orange-500 font-bold hover:shadow-lg rounded-full w-12 h-12 -ml-6"
          x-on:click="activeSlide = activeSlide === 1 ? slides.length : activeSlide - 1">
          &#8592;
         </button>
      </div>
      <div class="flex items-center justify-end w-1/2">
        <button 
          class="bg-teal-100 text-teal-500 hover:text-orange-500 font-bold hover:shadow rounded-full w-12 h-12 -mr-6"
          x-on:click="activeSlide = activeSlide === slides.length ? 1 : activeSlide + 1">
          &#8594;
        </button>
      </div>        
    </div>

<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

Author:
Fagundo67

2 years ago

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

Author:
Anonymous

1 year ago

19.2k
Verticle card grid
Best suited for news websites

Author:
Mr Robot

2 years ago

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

Author:
Anonymous

1 year ago

10.6k
Image Carousel

Author:
Nikolai

1 year ago

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

Author:
Maxim

1 year ago

11.1k
hero section fullpage

Author:
Leon Bachmann

2 years ago

10.9k
3D Animated Image Gallery
3D Animated Image Gallery

$$@(\/)(\/)Y$ Author:
$@(\/)(\/)Y

1 year ago

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

Author:
Anonymous

1 year ago

9.5k
Custom Carosel

Author:
Md. Tofayel islam

8 months ago

2k
responsive slider carousel
slider carousel

Author:
Abhiraj

4 months ago

1.5k
Premium Testimonial Carousel
It is a premium Testimonial Carousel

Author:
ishimwe shadad

1 week ago

130

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components

TailwindFlex.com

Tailwindflex.com is a free Tailwind CSS examples library. It's a one-stop destination for ready-made Tailwind CSS components and templates.

Contact

Email: admin@tailwindflex.com

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components Free CSS Components

© 2025 TailwindFlex. All Rights Reserved.

v1.1