→ Avdhut Surkute
→ Full-Screen Hero Slider with Alpine.js a...

Full-Screen Hero Slider with Alpine.js and Auto-Play

A responsive hero slider built with Alpine.js featuring full-screen background images, text overlays, and smooth fade transitions. Includes auto-play functionality and navigation controls for optimal user experience.

This Example is contributed by Avdhut Surkute, on 27-Jul-2025. It is responsive.

Alpine.js Hero Slider Image Carousel Auto-play

Author Avdhut Surkute

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hero Slider</title>
    <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
</head>
<body>
    <div class="hero-slider" x-data="{
        currentSlide: 0,
        slides: [
            {
                image: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80',
                title: 'Discover Amazing Places',
                subtitle: 'Explore the world with us and create unforgettable memories'
            },
            {
                image: 'https://images.unsplash.com/photo-1441974231531-c6227db76b6e?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80',
                title: 'Adventure Awaits',
                subtitle: 'Step into nature and experience breathtaking landscapes'
            },
            {
                image: 'https://images.unsplash.com/photo-1469474968028-56623f02e42e?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80',
                title: 'Find Your Journey',
                subtitle: 'Every path leads to a new story waiting to be told'
            }
        ],
        autoPlay: true,
        interval: null,
        init() {
            if (this.autoPlay) {
                this.startAutoPlay();
            }
        },
        nextSlide() {
            this.currentSlide = (this.currentSlide + 1) % this.slides.length;
        },
        prevSlide() {
            this.currentSlide = this.currentSlide === 0 ? this.slides.length - 1 : this.currentSlide - 1;
        },
        goToSlide(index) {
            this.currentSlide = index;
        },
        startAutoPlay() {
            this.interval = setInterval(() => {
                this.nextSlide();
            }, 5000);
        },
        stopAutoPlay() {
            if (this.interval) {
                clearInterval(this.interval);
                this.interval = null;
            }
        }
    }" x-init="init()" @mouseenter="stopAutoPlay()" @mouseleave="autoPlay && startAutoPlay()">
        
        <div class="slider-container">
            <template x-for="(slide, index) in slides" :key="index">
                <div class="slide" :class="{ 'active': index === currentSlide }" 
                     :style="`background-image: url(${slide.image})`">
                    <div class="slide-content">
                        <h1 class="slide-title" x-text="slide.title"></h1>
                        <p class="slide-subtitle" x-text="slide.subtitle"></p>
                        <button class="cta-button">Learn More</button>
                    </div>
                </div>
            </template>
        </div>
        
        <button class="nav-button prev" @click="prevSlide()">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M15 18L9 12L15 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
        </button>
        
        <button class="nav-button next" @click="nextSlide()">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M9 18L15 12L9 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
        </button>
        
        <div class="dot-indicators">
            <template x-for="(slide, index) in slides" :key="index">
                <button class="dot" :class="{ 'active': index === currentSlide }" 
                        @click="goToSlide(index)"></button>
            </template>
        </div>
    </div>
</body>
</html>

Related Examples