HeroSlider

Full-screen hero slider with automatic rotation and Ken Burns effect

Overview

The HeroSlider component displays a full-screen hero section with rotating slides. Each slide features a large background image with a Ken Burns zoom effect, overlay text, and customizable alignment. The slider automatically rotates every 6 seconds and includes navigation controls.

Import

import HeroSlider from '$lib/components/HeroSlider.svelte';

Props

slides · array · default: "[]"

Array of slide objects. If empty or not provided, displays three default slides showcasing PROVESA’s services.

Slide Structure:

{
  imageUrl: string;          // Background image URL
  title: string;             // Main title text
  highlight?: string;        // Highlighted word (optional)
  highlightColor?: string;   // Tailwind color class for highlight (e.g., 'text-accent-yellow')
  description?: string;      // Subtitle/description text
  badge?: string;           // Small badge text above title (e.g., 'Solidez desde 2006')
  align: 'left' | 'right' | 'center'; // Text alignment
}

Usage

With Database Slides

<script>
  let { data } = $props();
</script>

<HeroSlider slides={data.slides} />

With Custom Slides

<script>
  const customSlides = [
    {
      imageUrl: 'https://example.com/slide1.jpg',
      title: 'Bienvenido a',
      highlight: 'PROVESA',
      highlightColor: 'text-primary',
      description: 'Tu socio en distribución mayorista',
      badge: 'Desde 2006',
      align: 'left'
    },
    {
      imageUrl: 'https://example.com/slide2.jpg',
      title: 'Calidad garantizada',
      description: 'Los mejores productos para tu negocio',
      align: 'center'
    }
  ];
</script>

<HeroSlider slides={customSlides} />

Default Behavior (No Slides Provided)

<HeroSlider />

Displays three default slides highlighting PROVESA’s distribution, infrastructure, and product quality.

Default Slides

When no slides are provided, the component shows three built-in slides:

1. Slide 1 - Distribution (left-aligned)

   • Title: “El pulso de la distribución”
   • Badge: “Solidez desde 2006”
   • Highlight: Yellow accent

2. Slide 2 - Infrastructure (right-aligned)

   • Title: “Infraestructura Clase A”
   • Highlight: Primary color

3. Slide 3 - Quality (center-aligned)

   • Title: “Calidad en cada detalle”
   • Highlight: Red accent

Features

Automatic Rotation

Slides automatically advance every 6 seconds:

onMount(() => {
  const interval = setInterval(nextSlide, 6000);
  return () => clearInterval(interval);
});

Ken Burns Effect

Each active slide has a slow zoom animation:

@keyframes ken-burns {
  0% { transform: scale(1); }
  100% { transform: scale(1.08); }
}

.animate-ken-burns {
  animation: ken-burns 8s ease-out forwards;
}

Slide-In Animations

Content elements fade and slide up when the slide becomes active:

• Badge: 0.3s delay
• Title: 0.15s delay
• Description: 0.45s delay

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

Navigation Controls

The slider includes multiple navigation methods:

1. Navigation Dots (bottom center)

   • Clicking jumps to specific slide
   • Active dot is wider and has a pulse effect
   • Only visible if there’s more than one slide

2. Arrow Buttons (left/right sides)

   • Previous/Next slide buttons
   • Only visible if there’s more than one slide
   • Uses ChevronsLeft and ChevronsRight icons

3. Automatic Advance

   • Slides change every 6 seconds

Text Alignment

Slides support three alignment options via the align property:

Left Alignment

{ align: 'left' }

• Text aligned to left side
• Content positioned on left side of screen

Right Alignment

{ align: 'right' }

• Text aligned to right side
• Content positioned on right side with ml-auto

Center Alignment

{ align: 'center' }

• Text centered
• Content centered with mx-auto

Overlay Gradients

Each slide features layered gradients for better text readability:

<!-- Vertical gradient: dark bottom to light top -->
<div class="bg-gradient-to-t from-black/80 via-black/40 to-black/10"></div>

<!-- Horizontal gradient: dark edges -->
<div class="bg-gradient-to-r from-black/30 via-transparent to-black/30"></div>

Dimensions

height: 100vh;
max-height: 900px;
min-height: 600px;

• Full viewport height
• Maximum 900px on large screens
• Minimum 600px to ensure content visibility

Transition States

The component tracks transition state to prevent rapid slide changes:

let isTransitioning = $state(false);

function goToSlide(index) {
  if (index === currentIndex || isTransitioning) return;
  isTransitioning = true;
  currentIndex = index;
  setTimeout(() => (isTransitioning = false), 1000);
}

Badge Component

Optional badge above the title:

{#if sl.badge}
  <div class="inline-flex items-center gap-2 rounded-full 
              border border-white/10 bg-white/10 px-4 py-1.5 
              text-xs font-semibold tracking-widest text-white/90 
              uppercase backdrop-blur-md">
    <span class="h-1.5 w-1.5 animate-pulse rounded-full bg-green-400"></span>
    {sl.badge}
  </div>
{/if}

Includes a pulsing green dot indicator.

Accessibility

• Arrow buttons include aria-label attributes
• Navigation dots include aria-label with slide numbers
• Section has semantic id="inicio" for anchor navigation
• Images include alt text with slide information

Real-World Example

From routes/+page.svelte:

<script>
  import HeroSlider from '$lib/components/HeroSlider.svelte';
  
  let { data } = $props();
</script>

<HeroSlider slides={data.slides} />

The slides are typically loaded from a database through the page’s +page.server.js load function.

Performance Notes

• Only the active slide applies the Ken Burns animation
• Inactive slides are scaled to 1.05 for smooth transitions
• Z-index layering ensures proper stacking during transitions
• Images are loaded upfront (all slides rendered but hidden)

Dependencies

• lucide-svelte - ChevronsLeft, ChevronsRight icons
• svelte - onMount lifecycle function

Related Components

• Navbar - Often used with transparent={true} over the slider
• ProductSection - Typically follows the hero slider