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

1.5k

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

Hero with button

Author:
Laurits

3 years ago

11.1k
hero template
hero section

Author:
Raul antonio de la cruz hernandez

2 months ago

193
Hero

Author:
ORGIN_DREAMS

10 months ago

1.5k
Travel Landing Page: Australia

Author:
Maxim

11 months ago

2.4k
Hero section for website

Author:
Anonymous

1 year ago

2.1k
L'art de coder
L'art de coderL'art de coder

Author:
Omer fils ELENGA

1 week ago

8
Hero with description

Author:
Laurits

3 years ago

9.7k
Responsive Hero Section with Typewriter Effect
A modern hero section featuring a typewriter animation effect, social media links, and responsive design. Includes a user avatar placeholder and a clean dark gradient background. Built with Tailwind CSS and Font Awesome icons. Perfect for personal portfolio websites.

Author:
Muhammad Umair Arshad

11 months ago

686
composent section presentation société
composent section presentation société

Author:
Omer fils ELENGA

1 year ago

1.8k
Trading
used to trade something

Author:
nii fanny

9 months ago

815
Responsive Hero Section
Get this professional hero section for your website. Includes a gradient text effect, stylish background blurs, and a perfectly aligned image section. Easy to integrate and fully customizable for any project.

Author:
Homayoun

5 months ago

235
Startup page

Author:
ORGIN_DREAMS

9 months ago

818

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components