Animated Hero Slider, different images for mobile

A hero with 2 images alternating each other every 7 seconds, zoom on scroll

This tailwind example is contributed by Gianluca Secondo, on 24-Feb-2025. Component is made with Tailwind v3.4. It is responsive.

Hero

Author Gianluca Secondo

Tailwind v3.4 2.1k 4

Fork Fullscreen

<div class="relative h-screen overflow-hidden">
        <div class="absolute inset-0 bg-cover bg-center transition-transform duration-1000 scale-100 overflow-hidden"
             id="hero-container">
            <div class="absolute inset-0 bg-cover bg-center transition-transform duration-1000 flex w-full h-full"
                 id="hero-slider">
                
                <div class="w-full h-full bg-cover bg-center flex-shrink-0 sm:bg-[url('/static/hero1.jpg')] bg-[url('/static/hero3.jpg')] object-cover"></div>
                
                <div class="w-full h-full bg-cover bg-center flex-shrink-0 sm:bg-[url('/static/hero2.jpg')] bg-[url('/static/hero4.jpg')] object-cover"></div>
            </div>
        </div>
    </div>

// Hero image alternating effect with smooth horizontal transition
        let currentIndex = 0;
        const heroSlider = document.getElementById('hero-slider');

setInterval(() => {
            currentIndex = (currentIndex + 1) % 2;
            heroSlider.style.transform = `translateX(-${currentIndex * 100}%)`;
            heroSlider.style.transition = "transform 1s ease-in-out";
        }, 7000);
    </script>

Related Examples

SHOES SHOP
all categories of shoes like women ,men ,and children

ineza aime stella

1 year ago

1.1k
Landing page hero section UI
Modern Hero Section Design

UI-Templates

11 months ago

1.5k
Design
by salvator

Baraka Salvator

1 year ago

1.5k
Hero section
A hero section for a landing page for a university tech conference.

Robert Chunga

4 months ago

443
My Coding Journey
To transform a standard timeline into an engaging, scroll-driven narrative experience.

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

788
login
Sign in page on computer screen. Desktop computer with login form and sign in button. User account. Modern concept for web

Augustin

1 year ago

1.5k
Clean hero section

OmKar Mehta

2 years ago

3.9k
Pro Camera System
The Action Mode on iPhone 15 is a camera feature that provides extreme stabilization for shooting smooth, shake-free videos—ideal for fast movement or handheld filming. 🔍 Key Features: Super Stabilized Videos – Great for running, walking, or action shots. High Quality – Captures in up to 2.8K at 60fps while staying stable. Improved Low-Light Performance – Better than iPhone 14’s version. Automatic Adjustments – Detects motion and adapts accordingly.

ishimwe prince

1 year ago

1.6k
landi page template

Raul antonio de la cruz hernandez

9 months ago

640
Full-page header for landing pages
an attention-grabbing header with a strong message and clear calls to action.

Junclarkaizen Pagu

3 years ago

12.2k
future ai robot
this an ai template by salvator

Baraka Salvator

1 year ago

1.7k
Game changer
by salvator

Baraka Salvator

1 year ago

1.5k