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

8.1k
Slider
Responsive slider

Author:
Abhiraj

7 months ago

1.7k
slider /carousel
simple slider or carousel

Author:
Omer fils ELENGA

4 months ago

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

Author:
ORGIN_DREAMS

3 months ago

439
Premium Testimonial Carousel
It is a premium Testimonial Carousel

Author:
ishimwe shadad

3 months ago

607
PrimeCorp | Professional Business Solutions
We deliver cutting-edge business solutions through strategic consulting, tailored services, and continuous support. Partner with us to optimize operations, drive growth, and achieve sustainable success in today's competitive market.

Author:
Code Master(Mfuranziza Dusabe Hamza)

3 months ago

418
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

2 months ago

623
Bento Grid Layout with Images

Author:
Paul Intay

1 year ago

4.7k
image gallery
image gallery [lightbox]

Author:
Anonymous

2 years ago

19.2k
Custom Carosel

Author:
Md. Tofayel islam

11 months ago

2.4k
image gallery with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

1 year ago

3.9k
side bar
html css

Author:
Hacker Development

3 months ago

359

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components