Home
Gianluca Secondo
Animated Hero Slider, different images for mobile

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 CSS v3. It is responsive.

Hero

Author Gianluca Secondo

514

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

Portfolio Hero Section 3
visually stunning and captivating hero section component for your portfolio website.

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

1 year ago

6.9k
login_form
used for user to logging in

Author:
nii fanny

1 month ago

84
Home banner video background
Home banner video background

Author:
Rameez Rami

1 year ago

6.4k
Hero banner

Author:
Piet Vriend

2 years ago

15.7k
Startup page

Author:
ORGIN_DREAMS

1 month ago

181
SaaS Feature Section
It has a Gradient text headline and CTA buttons

Author:
Junclarkaizen Pagu

1 year ago

8.5k
3D Animated Image Gallery
3D Animated Image Gallery

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

1 year ago

7.4k
Tool Box
by salvator

Author:
Baraka Salvator

1 month ago

303
AcodeMaster GameZone – Play Your Favorite Games Online
AcodeMaster GameZone is a modern gaming website where you can discover, explore, and play exciting games anytime, anywhere. Designed with smooth animations and a stylish dark theme using Tailwind CSS, it offers a fast and fun experience for every gamer.

Author:
Code Master(Mfuranziza Dusabe Hamza)

1 month ago

425
Hero Section

Author:
Gbenga Adegoke

2 years ago

9.6k
Advance Designed hero section
We create a Advance animated hero section using tailwindcss and custom css

Author:
Akram Khan

11 months ago

1.6k
Life Tree
by salvator

Author:
Baraka Salvator

1 month ago

187

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components