Hero Slider

Hero slider with various background media, smooth transitions, and autoplay functionality. Each slide can contain combinations of text, images, and backgrounds.

  • Hero background

    Metalsmith Components Library

    Hero Slider Component

    Dynamic Multi-Slide Heroes

    Create engaging hero sections with multiple slides, smooth transitions, and rich media backgrounds. Perfect for showcasing multiple messages or features.

    View Features Back to Library

  • Powerful Capabilities

    Built for Performance

    Optimized for Modern Web

    Hardware-accelerated animations, lazy loading, and intelligent resource management ensure smooth performance across all devices.

    See Examples
    Feature showcase
  • Customization background

    Fully Customizable

    Adapt to Your Brand

    Extensive configuration options allow you to customize colors, transitions, timing, and layouts to match your design requirements.

    Get Started

  • Dynamic Backgrounds

    Video Background Support

    Bring Your Slides to Life

    Add engaging video backgrounds to create immersive experiences. Videos play automatically when the slide is active and pause when transitioning.

    Watch Demo

  • Solid Color Background

    Simple and Clean

    This slide demonstrates a solid color background with centered text content and call-to-action buttons.

    Primary Action
  • Background image

    Image Background

    With Dark Overlay

    Background images can include optional screen overlays to improve text readability.

    Learn More

  • Split Layout

    Text and Image Side by Side

    Slides can include content images that display alongside text for more visual interest.

    Content image

  • Vimeo Video Background

    Multiple Video Providers

    Support for YouTube, Vimeo, and Cloudinary video backgrounds with automatic playback control.

    Explore Videos

Configuration

sections:
  - sectionType: hero-slider
    # other settings

    autoplay: true
    autoPlayDelay: 5000
    slides:
      - navLabel: 'Welcome'
        isReverse: false
        text:
          title: 'Welcome to Our Site'
          titleTag: 'h1'
          prose: 'Engaging content that captures attention'
          isCentered: true
        ctas:
          - url: '/get-started'
            label: 'Get Started'
            isButton: true
            buttonStyle: 'primary'
        background:
          color: '#2c3e50'
          isDark: true
          image:
            src: '/assets/images/hero-bg.jpg'
            alt: 'Hero background'
          imageScreen: 'dark'
      - navLabel: 'Features'
        isReverse: true
        text:
          title: 'Amazing Features'
          prose: 'Discover what makes us different'
        image:
          src: '/assets/images/feature.jpg'
          alt: 'Feature image'
        background:
          color: '#34495e'
          isDark: true

Configuration Options

PropertyTypeDescription
navLabelstringText shown in navigation
isReversebooleanReverse content layout direction
textobjectText content (title, subtitle, prose, etc.)
ctasarrayCall-to-action buttons
imageobjectContent image (shown alongside text)
backgroundobjectBackground configuration with color, image, or video

Notes

  • Keep to 3-5 slides for optimal user experience
  • Use short, descriptive labels (1-2 words)
  • 5-7 seconds per slide is recommended
  • Content images automatically hide on mobile devices

Accessibility

  • ARIA labels on navigation elements
  • Keyboard navigation support
  • Pause autoplay on user interaction