Home
Abhiraj
responsive slider carousel

responsive slider carousel

slider carousel

This tailwind example is contributed by Abhiraj, on 01-Jan-2025. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example are Masonry, Image grid

Carousel Image gallery Range Slider

Author Abhiraj

1.9k

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Auto-Sliding Carousel</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <style>
    /* Carousel animation */
    @keyframes slide {
      0% {
        transform: translateX(0%);
      }
      20% {
        transform: translateX(0%);
      }
      25% {
        transform: translateX(-100%);
      }
      45% {
        transform: translateX(-100%);
      }
      50% {
        transform: translateX(-200%);
      }
      70% {
        transform: translateX(-200%);
      }
      75% {
        transform: translateX(0%);
      }
      100% {
        transform: translateX(0%);
      }
    }

.carousel {
      display: flex;
      animation: slide 12s infinite;
    }

.carousel-item {
      flex: 0 0 100%;
    }
  </style>
</head>
<body class="bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-white">
  <div class="max-w-7xl mx-auto p-6">
    
    <div class="text-center mb-6">
      <h1 class="text-3xl font-bold">Auto-Sliding Carousel</h1>
      <p class="text-gray-600 dark:text-gray-400">Auto-slide through your content seamlessly.</p>
    </div>

<div class="overflow-hidden rounded-lg shadow-lg">
      
      <div class="carousel">
        
        <div class="carousel-item bg-white dark:bg-gray-800 p-6">
          <img src="https://res.cloudinary.com/djv4xa6wu/image/upload/v1735722161/AbhirajK/Abhirajk2.webp" alt="Slide 1" class="w-full h-64 object-cover rounded-md">
          <h2 class="text-xl font-semibold mt-4">Slide 1</h2>
          <p class="text-gray-600 dark:text-gray-400">This is the first slide of the carousel.</p>
        </div>

<div class="carousel-item bg-white dark:bg-gray-800 p-6">
          <img src="https://res.cloudinary.com/djv4xa6wu/image/upload/v1735722161/AbhirajK/Abhirajk3.webp" alt="Slide 2" class="w-full h-64 object-cover rounded-md">
          <h2 class="text-xl font-semibold mt-4">Slide 2</h2>
          <p class="text-gray-600 dark:text-gray-400">This is the second slide of the carousel.</p>
        </div>

<div class="carousel-item bg-white dark:bg-gray-800 p-6">
          <img src="https://res.cloudinary.com/djv4xa6wu/image/upload/v1735722163/AbhirajK/Abhirajk%20mykare.webp" alt="Slide 3" class="w-full h-64 object-cover rounded-md">
          <h2 class="text-xl font-semibold mt-4">Slide 3</h2>
          <p class="text-gray-600 dark:text-gray-400">This is the third slide of the carousel.</p>
        </div>
      </div>
    </div>

<div class="text-center mt-6">
      <p class="text-gray-500 dark:text-gray-400">
        This carousel automatically slides through the content using CSS animations.
      </p>
    </div>

<footer class="mt-8 text-center">
      <p class="text-gray-600 dark:text-gray-400">
        Designed by <a href="https://abhirajk.vercel.app/" class="text-blue-500 hover:underline" target="_blank">Abhiraj K</a>
      </p>
    </footer>
  </div>
</body>
</html>

Related Examples

3D Animated Image Gallery
3D Animated Image Gallery

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

1 year ago

7.7k
Slider
Responsive slider

Author:
Abhiraj

6 months ago

1.6k
slider /carousel
simple slider or carousel

Author:
Omer fils ELENGA

3 months ago

580
ArtoGallery
Explore a curated selection of contemporary and classic artwork, connecting collectors and creators in an inspiring online space.

Author:
ORGIN_DREAMS

2 months ago

361
AcodeMaster GameZone – Play Your Favorite Games Online
AcodeMaster GameZone is a modern gaming website where you can discover, explore, and play exciting games anytime, anywhere. Designed with smooth animations and a stylish dark theme using Tailwind CSS, it offers a fast and fun experience for every gamer.

Author:
Code Master(Mfuranziza Dusabe Hamza)

2 months ago

576
Tailwind image slider
slider with navigation buttons and info about image

Author:
Anonymous

1 year ago

19.8k
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

1 month ago

326
Multi Range Slider
Adjust the sliders to set your preferred price range. The left slider sets the minimum price, and the right slider sets the maximum price. The selected range is displayed below the sliders in real-time, allowing you to easily filter products within your budget.

Author:
SHARIFUL ISLAM

5 months ago

1k
GALLERY

Author:
ORGIN_DREAMS

2 months ago

581
image gallery
image gallery [lightbox]

Author:
Prasertsak ฟาร์มวันหยุด

1 year ago

3k
image gallery
image gallery [lightbox]

Author:
Anonymous

2 years ago

19.1k
Hero Slider with Alpine.js
This responsive hero slider features full-screen image backgrounds with elegant text overlays and smooth transitions.

Author:
Juraj

2 months ago

857

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components