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

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

carousel

Author:
Crimson

5 months ago

1.7k
GALLERY

Author:
ORGIN_DREAMS

1 month ago

254
Custom Carosel

Author:
Md. Tofayel islam

9 months ago

2.1k
Images grid
Responsive image grid with tailwindcss.

Author:
Sienna

2 years ago

18.2k
Simple Multi-Purpose Slider
This is a very minimalistic though very usable slider for various situations like CTA's, quotes or other uncomplicated content. I only used Tailwindcss which makes it very lightweight, but due to limitations it's not as flexible as I wished for. This could be easily achieved by a little piece of JS to make it as dynamic as you wish.

Author:
Hielke Brandsma

7 months ago

1.5k
gallary
html , css

Author:
Hacker Development

1 month ago

182
Gallery
Gallery

Author:
Aman kumar

1 year ago

2.5k
Slider
Responsive slider

Author:
Abhiraj

5 months ago

1.4k
Next-Gen Hero Section – Tailwind CSS Component
A stunning, futuristic Hero Section built with Tailwind CSS, designed to capture user attention with glowing animations, smooth gradients, and bold typography. Perfect for modern web apps, education platforms like EduForce, landing pages, or portfolios. This component is responsive, interactive, and visually unique — not commonly found in typical UI libraries.

Author:
Code Master(Mfuranziza Dusabe Hamza)

1 month ago

380
Image gallery using grid
basic image gallery that displays images in a responsive grid, with an overlay and a "View" button that appears on hover. You can further customize and enhance it to fit your design and functionality requirements.

Author:
Prajwal Hallale

1 year ago

10.1k
Image Carousel

Author:
Nikolai

1 year ago

6.1k
slider /carousel
simple slider or carousel

Author:
Omer fils ELENGA

1 month ago

386

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components