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.3k

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.7k
Slider
Responsive slider

Author:
Abhiraj

11 months ago

2.3k
slider /carousel
simple slider or carousel

Author:
Omer fils ELENGA

8 months ago

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

Author:
ORGIN_DREAMS

7 months ago

1.1k
Avant & Après
Avant & Après

Author:
Omer fils ELENGA

1 month ago

291
Linear dinamique section by Raul antonio de la cruz hernandez remix omerlinx responsive
Linear dinamique section by Raul antonio de la cruz hernandez remix omerlinx responsive

Author:
Omer fils ELENGA

2 weeks ago

59
tinderclone By omerlinks
tinderclone By omerlinks

Author:
Omer fils ELENGA

2 weeks ago

36
omerlinkStream
omerlinkStream

Author:
Omer fils ELENGA

2 weeks ago

195
Responsive Image Carousel with Alpine.js
This component is a fully responsive image carousel/slider that displays: 1 slide at a time on mobile devices (screen width < 768px) 3 slides at a time on desktop (screen width ≥ 768px)

Author:
Salah eldein

2 months ago

154
BONIMATOR Game Portal
BONIMATOR Game Portal

Author:
Bonimater

5 months ago

445
Range Slider
Also, shows the current value of the slider while it is being slid

Author:
Nikolai

1 year ago

6.7k
an off line game of catching afox
an off line game of catching afox

Author:
Bonimater

7 months ago

676

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components