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

32.2k

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

3 years ago

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

Author:
Anonymous

2 years ago

20.9k
Verticle card grid
Best suited for news websites

Author:
Mr Robot

3 years ago

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

Author:
Anonymous

2 years ago

12.2k
Image Carousel

Author:
Nikolai

2 years ago

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

Author:
Maxim

1 year ago

13.4k
hero section fullpage

Author:
Leon Bachmann

3 years ago

11.7k
3D Animated Image Gallery
3D Animated Image Gallery

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

1 year ago

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

Author:
Anonymous

2 years ago

11.1k
Our services
Component: Interactive Services Carousel Overview: A card-based carousel built with HTML5 and Tailwind CSS, powered by Vanilla JavaScript. It displays Adeoar's 6 main services with a responsive layout and smooth transitions. Technical Features: Responsive: Displays 3 columns on desktop (md breakpoint) and 1 column on mobile devices. Dependencies: Tailwind CSS (CDN or compiled) + Native JavaScript (no external libraries like Swiper or Slick required). Icons: Inline SVG icons (Heroicons style). Functionalities: Navigation: Side buttons (prev/next) and bottom pagination (indicator dots). Automation: Autoplay runs every 4 seconds (infinite loop logic). Interaction: Autoplay pauses automatically on mouse hover (mouseenter/mouseleave). Style & Design (UX/UI): Default State: White background, soft shadows, pastel-colored icon backgrounds. Hover State (Active): Zoom Effect: The card scales up (scale-105). Color Inversion: Background changes to Navy Blue (bg-blue-900) and text turns white for high contrast. Details: The icon background turns white, and the icon stroke takes the dark blue color.

Author:
Juan D. Cortorreal

3 months ago

449
Premium High-Performance Web Gaming Hub
Experience the future of browser-based gaming. I’ve developed a premium arcade hub designed for speed, clarity, and zero-latency gameplay. Built with modern web technologies, Ayyamperumal Games brings AAA-inspired visuals and high-octane mechanics directly to your browser—no downloads, no lag, just pure performance. Explore a curated library of titles ranging from minimalist logic puzzles like Sudoku Elite to fast-paced action in Neon Drift. This is where clean code meets high-level entertainment.

Author:
Ayyamperumal S

2 months ago

422
Premium Testimonial Carousel
It is a premium Testimonial Carousel

Author:
ishimwe shadad

9 months ago

1.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components