Home
Nikolai
Image Carousel

Image Carousel

This tailwind example is contributed by Nikolai, on 11-Mar-2024. Component is made with Tailwind CSS v3. It is responsive.

Carousel

Author Nikolai

7.1k

7

Fork Fullscreen

<div class="relative">
    <div class="carousel max-w-xl flex">
        
        <div class="carousel-item">
            <img src="https://source.unsplash.com/random/800x600" alt="Carousel Image 1"
                class="w-full h-96 object-cover">
        </div>
        <div class="carousel-item">
            <img src="https://source.unsplash.com/random/800x600?2" alt="Carousel Image 2"
                class="w-full h-96 object-cover">
        </div>
        <div class="carousel-item">
            <img src="https://source.unsplash.com/random/800x600?3" alt="Carousel Image 3"
                class="w-full h-96 object-cover">
        </div>
    </div>

<div class="absolute inset-y-0 left-0 flex items-center justify-start pl-4">
        <button
            class="carousel-control-prev bg-gray-800 hover:bg-gray-700 text-white rounded-full p-2 focus:outline-none">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
            </svg>
        </button>
    </div>
    <div class="absolute inset-y-0 right-0 flex items-center justify-end pr-4">
        <button
            class="carousel-control-next bg-gray-800 hover:bg-gray-700 text-white rounded-full p-2 focus:outline-none">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
            </svg>
        </button>
    </div>
</div>

<script>
    const carousel = document.querySelector('.carousel');
    const prevButton = document.querySelector('.carousel-control-prev');
    const nextButton = document.querySelector('.carousel-control-next');

prevButton.addEventListener('click', () => {
        carousel.scrollBy({
            left: -carousel.offsetWidth,
            behavior: 'smooth'
        });
    });

nextButton.addEventListener('click', () => {
        carousel.scrollBy({
            left: carousel.offsetWidth,
            behavior: 'smooth'
        });
    });
</script>

Related Examples

Image carousel
Uses Flowbite

Author:
Fagundo67

2 years ago

31.3k
Carousel with Tailwind CSS and Alpine.js
Simple card Carousel

Author:
Brandon D

3 years ago

31.8k
Tailwind image slider
slider with navigation buttons and info about image

Author:
Anonymous

2 years ago

20.8k
3 columns blog section
de columnis, columni, 3 columns

Author:
Anonymous

2 years ago

12.1k
3D Animated Image Gallery
3D Animated Image Gallery

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

1 year ago

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

Author:
Maxim

1 year ago

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

3 months ago

189
Premium Testimonial Carousel
It is a premium Testimonial Carousel

Author:
ishimwe shadad

8 months ago

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

1 month ago

87
PlayStore Style Carousel
PlayStore Style Carousel

Author:
Omer fils ELENGA

2 weeks ago

52
omerlinkStream
omerlinkStream

Author:
Omer fils ELENGA

1 month ago

311
Custom Carosel

Author:
Md. Tofayel islam

1 year ago

2.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components

TailwindFlex.com

Tailwindflex.com is a free Tailwind CSS examples library. It's a one-stop destination for ready-made Tailwind CSS components and templates.

Contact

Email: admin@tailwindflex.com

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components Free CSS Components

© 2026 TailwindFlex. All Rights Reserved.

v1.12