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

2.2k

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

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

1 year ago

8.5k
Slider
Responsive slider

Author:
Abhiraj

10 months ago

2.1k
slider /carousel
simple slider or carousel

Author:
Omer fils ELENGA

7 months ago

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

Author:
ORGIN_DREAMS

6 months ago

969
Avant & Après
Avant & Après

Author:
Omer fils ELENGA

4 days ago

29
Carousel

Author:
Juraj

9 months ago

2.2k
side bar
html css

Author:
Hacker Development

6 months ago

748
ULTIMATE SNAKE
(click to https://quantum-snake.netlify.app/ )ULTIMATE SNAKE is a modern reimagining of the classic Snake game, blending retro gameplay with enhanced visuals, power-ups, and a dynamic difficulty system. Designed for both casual players and high-score chasers, this game brings nostalgia and excitement in every move.

Author:
Code Master(Mfuranziza Dusabe Hamza)

6 months ago

622
Luxurious Grid Gallery

Author:
UI-Templates

1 month ago

91
slider models
Tailwind slider models

Author:
QQ-VVN

6 months ago

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

Author:
Maxim

1 year ago

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

963

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components