Home
Brandon D
Carousel with Tailwind CSS and Alpine.js

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

31.5k

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

Author:
Fagundo67

2 years ago

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

Author:
Anonymous

2 years ago

20.6k
Verticle card grid
Best suited for news websites

Author:
Mr Robot

3 years ago

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

Author:
Anonymous

2 years ago

11.9k
Image Carousel

Author:
Nikolai

1 year ago

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

Author:
Maxim

1 year ago

13k
hero section fullpage

Author:
Leon Bachmann

2 years ago

11.6k
3D Animated Image Gallery
3D Animated Image Gallery

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

1 year ago

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

Author:
Anonymous

2 years ago

10.7k
Hero Section
Responsive Hero Section for you Project Background Image: A stunning, high-quality Unsplash photo that creates a unique visual impact. Overlay: Semi-transparent black overlay with blur effect for readability and a modern aesthetic. Content Area: Centered with a gradient background overlay for contrast, bold headline, engaging subtext. Buttons: Vibrant gradient and clean border with smooth hover animations to draw attention. Responsive Design: Looks great on all screen sizes with adaptable padding and font sizes.

Author:
KULDEEP

6 months ago

1.3k
Simple Animated Carousel
A simple, animated 2:1 carousel with touch swipe support, based on perky98/Juraj's carousel.

Author:
Nick Girga

7 months ago

1.1k
Image carousel
Uses Flowbite

Author:
Anonymous

1 year ago

2.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components