Home
Juraj
Hero Slider with Alpine.js

Hero Slider with Alpine.js

This responsive hero slider features full-screen image backgrounds with elegant text overlays and smooth transitions.

This tailwind example is contributed by Juraj, on 16-May-2025. Component is made with Tailwind CSS v3. It is responsive.

Carousel Hero

Author Juraj

1.3k

3

Fork Fullscreen

<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        .hero-slide {
            transition: opacity 0.8s ease, transform 0.8s ease;
        }
        .slide-content {
            transition: all 0.6s ease 0.3s;
        }
        .fade-in {
            animation: fadeIn 1s ease-in;
        }
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
    </style>
<body>
    <div x-data="heroSlider()" class="relative overflow-hidden" @mouseenter="autoplay = false" @mouseleave="autoplay = true">
        <div class="relative h-[80vh] min-h-[500px]">
            <template x-for="(slide, index) in slides" :key="index">
                <div 
                    x-show="currentSlide === index"
                    x-transition.opacity.duration.800ms
                    class="absolute inset-0"
                >
                    <div class="absolute inset-0 bg-gray-800">
                        <img 
                            :src="slide.image" 
                            :alt="slide.title"
                            class="w-full h-full object-cover opacity-80"
                            @error="replaceBrokenImage($event)"
                            loading="lazy"
                        >
                    </div>
                    
                    <div class="container mx-auto px-6 h-full flex items-center">
                        <div 
                            class="max-w-2xl text-white slide-content"
                            :class="{
                                'translate-x-0 opacity-100': currentSlide === index,
                                'translate-x-10 opacity-0': currentSlide !== index
                            }"
                        >
                            <h2 x-text="slide.title" class="text-4xl md:text-5xl font-bold mb-4"></h2>
                            <p x-text="slide.description" class="text-xl md:text-2xl mb-8"></p>
                            <a 
                                :href="slide.buttonUrl" 
                                class="inline-block bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-lg text-lg font-semibold transition-colors fade-in"
                                x-text="slide.buttonText"
                            ></a>
                        </div>
                    </div>
                </div>
            </template>
            
            <button 
                @click="prev()" 
                class="absolute left-4 top-1/2 -translate-y-1/2 bg-black/50 hover:bg-black/70 text-white rounded-full w-10 h-10 md:w-12 md:h-12 flex items-center justify-center z-10 transition-all"
                aria-label="Previous slide"
            >
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 md:h-6 md:w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
                </svg>
            </button>
            <button 
                @click="next()" 
                class="absolute right-4 top-1/2 -translate-y-1/2 bg-black/50 hover:bg-black/70 text-white rounded-full w-10 h-10 md:w-12 md:h-12 flex items-center justify-center z-10 transition-all"
                aria-label="Next slide"
            >
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 md:h-6 md:h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                </svg>
            </button>
            
            <div class="absolute bottom-8 left-1/2 -translate-x-1/2 flex space-x-2 z-10">
                <template x-for="(slide, index) in slides" :key="index">
                    <button
                        @click="goTo(index)"
                        class="w-2 h-2 md:w-3 md:h-3 rounded-full transition-all"
                        :class="{
                            'bg-white w-4 md:w-6': currentSlide === index,
                            'bg-white/50': currentSlide !== index
                        }"
                        :aria-label="`Go to slide ${index + 1}`"
                    ></button>
                </template>
            </div>
        </div>
    </div>

<script>
        function heroSlider() {
            return {
                currentSlide: 0,
                autoplay: true,
                interval: null,
                slides: [
                    {
                        title: "Objavte nové obzory",
                        description: "Cestovateľské zážitky, ktoré vám zmenia život",
                        buttonText: "Rezervovať",
                        buttonUrl: "#",
                        image: "https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1920&q=80"
                    },
                    {
                        title: "Prírodné krásy",
                        description: "Nádherné výhľady a čistá príroda",
                        buttonText: "Pozrieť ponuku",
                        buttonUrl: "#",
                        image: "https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1920&q=80"
                    },
                    {
                        title: "Mestské dobrodružstvo",
                        description: "Moderné mestá plné života a kultúry",
                        buttonText: "Viac informácií",
                        buttonUrl: "#",
                        image: "https://images.unsplash.com/photo-1487958449943-2429e8be8625?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1920&q=80"
                    }
                ],
                init() {
                    this.startAutoplay();
                },
                next() {
                    this.currentSlide = (this.currentSlide + 1) % this.slides.length;
                },
                prev() {
                    this.currentSlide = (this.currentSlide - 1 + this.slides.length) % this.slides.length;
                },
                goTo(index) {
                    this.currentSlide = index;
                },
                startAutoplay() {
                    this.interval = setInterval(() => {
                        if (this.autoplay) {
                            this.next();
                        }
                    }, 5000);
                },
                replaceBrokenImage(event) {
                    // Fallback obrázky z iného zdroja
                    const fallbacks = [
                        'https://picsum.photos/id/1018/1920/1080',
                        'https://picsum.photos/id/1015/1920/1080',
                        'https://picsum.photos/id/1019/1920/1080'
                    ];
                    event.target.src = fallbacks[this.currentSlide % fallbacks.length];
                }
            }
        }
    </script>

Related Examples

3D Animated Image Gallery
3D Animated Image Gallery

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

1 year ago

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

4 months ago

984
macOS Style Webpage – macOS Design in the Browser
A simple webpage inspired by the macOS interface. It recreates the clean design, dock, and desktop look of macOS using only HTML, tailwind CSS, and JavaScript. This project focuses on front-end styling and layout to bring the visual feel of macOS to the web — not a full simulation, just the look and vibe.

Author:
Hamza Atig

1 day ago

36
home page
Hero Section: Gradient background with noise texture Animated floating image Gradient text effect Call-to-action buttons Features Section: Three feature cards with gradient headers Hover animations Clean iconography Stats Display: Full-width gradient background Clean stat presentation Testimonials: Three testimonial cards with user avatars Star ratings Border accents Hover scaling effects Call-to-Action (CTA) Section: Gradient background Centered content Multiple action buttons Footer: Four-column layout Social media icons Newsletter signup Copyright information Design Features: Vibrant gradient color scheme Smooth hover animations and transitions Responsive layout for all screen sizes Modern typography Subtle floating animations Clean, card-based design

Author:
ishimwe prince

5 months ago

636
Design
by salvator

Author:
Baraka Salvator

5 months ago

674
Hero section with fancy heading

Author:
Laurits

3 years ago

11.9k
Landing page

Author:
Maxim

7 months ago

1.6k
Heade With Hero Section

Author:
Abdul Baset Bappy

4 months ago

773
Stars: Sun and Moon Illustrations
I Created Sun and Moon Illustrations with Tailwind CSS, Embracing Light and Dark Modes

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

1 year ago

4k
Food App Web design

Author:
Aitrik Saha

7 months ago

1.4k
GreenLeaf
Transform Your Garden

Author:
ORGIN_DREAMS

5 months ago

757
Hero component

Author:
Freja Jensen

2 years ago

12.7k

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

© 2025 TailwindFlex. All Rights Reserved.

v1.12