Home
Juraj
Hero Slider with Alpine.js

9

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

972

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

Product Page
Showcase for the product.

Author:
muhamadrofii911

1 year ago

2.1k
Hero banner

Author:
Laurits

2 years ago

11.9k
Hero section

Author:
Mohit Prajapati

2 years ago

12k
Hero section
Hero section for your project

Author:
Prajwal Hallale

3 years ago

9k
Magic Sound
by salvator

Author:
Baraka Salvator

2 months ago

424
beautifull web page
I create a web page using cloude ai its amazing.

Author:
Akram Khan

1 year ago

2.5k
Modern page
hero page by salvator

Author:
Baraka Salvator

2 months ago

564
login form php
A login form is a user interface element commonly found on websites and applications. Its main purpose is to authenticate users by asking them to entecredentian

Author:
nii fanny

2 months ago

225
Hero banner

Author:
Piet Vriend

2 years ago

16.1k
Website Pricing List Card Component
Website Pricing List Card Component with Package Names: Basic Package → Starter Website Premium Package → Business Website Professional Package → E-Commerce Solution Pricing Structure: Increased prices significantly to reflect web development services one-time payment model FAQ Content.

Author:
Ayyamperumal S

4 months ago

793
flower
by salvator

Author:
Baraka Salvator

2 months ago

368
Very simple hero

Author:
Laurits

2 years ago

8.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ 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.1