Image Carousel

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

Carousel

Author Nikolai

Tailwind v3.4 8.1k 9

Fork Fullscreen

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

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

Fagundo67

3 years ago

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

Brandon D

4 years ago

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

Anonymous

2 years ago

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

Anonymous

2 years ago

12.9k
3D Animated Image Gallery
3D Animated Image Gallery

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

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

Maxim

2 years ago

14.2k
Slider
Responsive slider

Abhiraj

1 year ago

3k
PlayStore Style Carousel
PlayStore Style Carousel

Omer fils ELENGA

8 months ago

407
slider /carousel
simple slider or carousel

Omer fils ELENGA

1 year ago

1.7k
Premium High-Performance Web Gaming Hub
Experience the future of browser-based gaming. I’ve developed a premium arcade hub designed for speed, clarity, and zero-latency gameplay. Built with modern web technologies, Ayyamperumal Games brings AAA-inspired visuals and high-octane mechanics directly to your browser—no downloads, no lag, just pure performance. Explore a curated library of titles ranging from minimalist logic puzzles like Sudoku Elite to fast-paced action in Neon Drift. This is where clean code meets high-level entertainment.

Ayyamperumal S

9 months ago

961
Testimonials

$$@(\/)(\/)¥$ $@(\/)(\/)¥

1 year ago

2.3k
Galerie Interactive
Galerie Interactive

Omer fils ELENGA

8 months ago

475