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

768

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

Author:
ABDO-SY

5 months ago

1.2k
Hero simple
hero design simple

Author:
QQ-VVN

2 months ago

326
animated hero

Author:
Crimson

6 months ago

2.2k
About Us

Author:
KULDEEP

1 month ago

294
Beautiful Hero Section

Author:
Brandon D

3 years ago

14.5k
Home banner video background
Home banner video background

Author:
Rameez Rami

1 year ago

6.5k
App Hero Section With header

Author:
Abdul Baset Bappy

1 month ago

312
New Collection
A "New Collection" in fashion refers to a series of new garments and accessories designed and released by a designer or brand for a specific season (e.g., Spring/Summer, Fall/Winter). It's a carefully curated selection of items that typically share a common theme, style, or inspiration, reflecting the brand's identity and target audienc

Author:
nii fanny

2 months ago

137
beautifull portfolio page
I create a portfolio page

Author:
Akram Khan

1 year ago

1.7k
Portfolio Hero Section 2
visually stunning and captivating hero section component for your portfolio website.

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

1 year ago

4.6k
Product Page
Showcase for the product.

Author:
muhamadrofii911

11 months ago

2k
Hero template

Author:
Leon Bachmann

2 years ago

12.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components