Home
Brandon D
Carousel with Tailwind CSS and Alpine.js

3

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

24.2k

10

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

1 year ago

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

Author:
Anonymous

9 months ago

14.5k
Verticle card grid
Best suited for news websites

Author:
Mr Robot

1 year ago

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

Author:
Anonymous

9 months ago

8.4k
Image Carousel

Author:
Nikolai

6 months ago

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

Author:
Maxim Alex

5 months ago

6k
hero section fullpage

Author:
Leon Bachmann

1 year ago

9.6k
3D Animated Image Gallery
3D Animated Image Gallery

Author:
Samuel Abera

5 months ago

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

Author:
Anonymous

10 months ago

7.3k
Nice and simple carousel
Nice and simple carousel, fully responsive.

Author:
dev cheick

1 month ago

426
Custom Carosel

Author:
Md. Tofayel islam

2 days ago

25
How to create a carousel with Tailwind CSS and Alpinejs
How to create a carousel with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

4 months ago

1.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 1600+ componenent

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

© 2024 TailwindFlex. All Rights Reserved.

v1.8