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.4k

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

omerlinkStream
omerlinkStream

Author:
Omer fils ELENGA

1 month ago

325
Macbook Air 13" Mockup
A gorgeous component that can be used for landing pages, hero statements and more. Interested in our UI library? Check out the discord link in my bio.

Author:
Coastal UI

1 year ago

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

Author:
Code Master(Mfuranziza Dusabe Hamza)

4 months ago

580
Portfolio Hero Section

Author:
KULDEEP

7 months ago

653
hero page
by salvator

Author:
Baraka Salvator

8 months ago

1.8k
composent clean
composent clean

Author:
Omer fils ELENGA

2 months ago

141
Banner - Hero - Splash Section

Author:
ABDO-SY

11 months ago

1.2k
Hero (with dark mode)
Full-width hero section with background image overlay. Includes headline, description text and CTA buttons. Supports dark mode and responsive design.

Author:
Maxim

1 year ago

1.4k
bears/beats/battlestar gallactica
bears beats battlestar gallactica

Author:
Anonymous

2 years ago

9.7k
Inventory
management

Author:
Ramkesh Gupta

3 months ago

345
A Fullscreen Hero Section

Author:
Brandon D

3 years ago

21.8k
Hero Section
Responsive Hero Section for you Project Background Image: A stunning, high-quality Unsplash photo that creates a unique visual impact. Overlay: Semi-transparent black overlay with blur effect for readability and a modern aesthetic. Content Area: Centered with a gradient background overlay for contrast, bold headline, engaging subtext. Buttons: Vibrant gradient and clean border with smooth hover animations to draw attention. Responsive Design: Looks great on all screen sizes with adaptable padding and font sizes.

Author:
KULDEEP

7 months ago

1.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components