Home
Juraj
Hero Slider with Alpine.js

16

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

4

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

6 months ago

1.3k
Digital banking hero
Create a professional and trustworthy hero section for a banking landing page using TailwindCSS. This section features a bold, confidence-inspiring headline, a clear subheading emphasizing security and ease of banking, and a call-to-action button for account sign-ups or exploring services. With a modern, clean design, a background that reflects stability and innovation, and visually appealing elements, this hero section establishes credibility and trust. Ideal for online banking, fintech startups, and financial institutions, ensuring a seamless and engaging user experience.

Author:
SHARIFUL ISLAM

10 months ago

1.6k
bears/beats/battlestar gallactica
bears beats battlestar gallactica

Author:
Anonymous

2 years ago

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

1 year ago

2.1k
Hero Section
Created a good and responsive web Hero Page

Author:
Ravi.Kumar Kumar

10 months ago

2.4k
Hero template

Author:
Leon Bachmann

3 years ago

13.6k
DevPort
modern portifolio by salvator

Author:
Baraka Salvator

7 months ago

1.1k
Hero banner

Author:
Laurits

2 years ago

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

Author:
Akram Khan

1 year ago

3k
Banner - Hero - Splash Section

Author:
ABDO-SY

10 months ago

990
Hero with video background

Author:
farisubuntu

1 year ago

1.8k

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