Skip to content

Eyeva Hero Carousel Widget

Description

The Eyeva Hero Carousel Widget is a hero banner carousel for the Eyeva theme, using Blaze Slider with video support, random order option, and intersection observer for auto-pause videos.

Page Builder Name: Hero Carousel | PapaThemes Eyeva

Version: 1.0.3

Features

  • ✅ Blaze Slider (lightweight, no jQuery required)
  • ✅ Video support in slides
  • ✅ Auto-pause video when out of viewport
  • ✅ Random banner order option
  • ✅ Pause/play button
  • ✅ Responsive breakpoints
  • ✅ SVG icon sprites

How to Use

1. Add Widget

  1. Open Page Builder
  2. Drag Hero Carousel | PapaThemes Eyeva widget to the page
  3. Widget displays carousel

2. Configuration

Option Description Default
Random Banner Order Shuffle slide order false
Enable Pagination Show dots true
Enable Autoplay Auto-advance false
Autoplay Interval Time per slide (ms) 5000
Stop on Interaction Stop when user interacts true
Transition Duration Animation time (ms) 800
Slides to Show Number of slides visible 1

Blaze Slider Configuration

Default Config

{
    "all": {
        "enablePagination": true,
        "enableAutoplay": false,
        "autoplayInterval": 5000,
        "stopAutoplayOnInteraction": true,
        "transitionDuration": 800,
        "slidesToShow": 1,
        "slidesToScroll": 1,
        "slideGap": "0px"
    },
    "(max-width: 800px)": {
        "slidesToShow": 1
    },
    "(max-width: 550px)": {
        "slidesToShow": 1
    }
}

Video Support

Videos in Slides

Widget automatically manages video playback:

// Pause all videos on slide change
slider.onSlide(() => {
    slider.slides.forEach(slide => {
        slide.querySelectorAll('video').forEach(video => video.pause());
    });

    // Play current slide's video
    slider.slides[0].querySelectorAll('video').forEach(video => {
        if ($(video).is(':visible')) {
            video.play();
        }
    });
});

Intersection Observer

Videos auto-pause when out of viewport:

const observer = new IntersectionObserver(entries => {
    entries.forEach(entry => {
        if (!entry.isIntersecting) {
            entry.target.pause();
        } else {
            // Play if current slide
            video.play();
        }
    });
});

Random Banner Order

When Random Banner Order is enabled:

function shuffleSlides(widgetElement) {
    const trackContainer = widgetElement.querySelector('.blaze-track');
    const slides = Array.from(trackContainer.children);

    // Fisher-Yates shuffle
    for (let i = slides.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [slides[i], slides[j]] = [slides[j], slides[i]];
    }

    slides.forEach(slide => trackContainer.appendChild(slide));
}
  • Shuffles on each page load
  • Content unchanged, only order

Pause/Play Button

<button class="blaze-pause" aria-label="Pause">
    <span class="icon">...</span>
</button>

$scope.find('.blaze-pause').on('click', (event) => {
    if (slider.config.enableAutoplay) {
        slider.stopAutoplay();
        $scope.addClass('paused');
    } else {
        slider.startAutoplay();
        $scope.removeClass('paused');
    }
});

<button class="blaze-prev" aria-label="Previous">
    <span class="icon">
        <svg><use href="#icon-arrow-left"></use></svg>
    </span>
</button>
<button class="blaze-next" aria-label="Next">
    <span class="icon">
        <svg><use href="#icon-arrow-right"></use></svg>
    </span>
</button>

Pagination Dots

  • Auto-generated by Blaze Slider
  • Number of dots = number of slides
widgetElement.querySelectorAll('[data-href]').forEach((el) => {
    el.addEventListener('click', () => {
        if (!editMode) {
            window.location = el.dataset.href;
        }
    });
});

Edit Mode Features

In Page Builder Edit Mode: - Video events logged to console - MutationObserver cleanup when widget removed - IntersectionObserver disconnect

Responsive Breakpoints

Breakpoint Slides Behavior
Desktop (>800px) 1 Full features
Tablet (551-800px) 1 Touch swipe
Mobile (<550px) 1 Optimized touch

Usage Examples

Homepage Hero

Slides: 3-5 hero banners
Autoplay: true
Interval: 5000ms
Random Order: false

Slides: Mix of images and videos
Autoplay: false (user controls)
Video: Auto-play when visible

Performance

Blaze Slider Benefits

  • Lightweight (~3KB)
  • No jQuery dependency (optional)
  • CSS-based animations
  • Lazy loading support

Video Optimization

  • Videos pause when not visible
  • Reduces bandwidth usage
  • Better battery life on mobile

SVG Icons

Widget injects icon sprites:

injectIconSvg(iconUrl);

Icons available: - #icon-arrow-left-long - #icon-arrow-right-long - #icon-pause - #icon-play

Notes

  1. Video formats: Use MP4 with H.264
  2. Video size: Optimize for web
  3. Autoplay policies: Browsers may block autoplay
  4. Random order: Different order each page load
  5. Mobile: Test video playback on mobile
  6. Accessibility: Ensure alt text for images