Eyeva Banner Carousel Widget¶

Description¶

The Eyeva Banner Carousel Widget displays a banner carousel for the Eyeva theme, using Blaze Slider with autoplay, navigation, and SVG icons features.

Page Builder Name: Banner Carousel | PapaThemes Eyeva

Version: 1.0.0

Features¶

• ✅ Blaze Slider carousel
• ✅ Multiple slides visible
• ✅ Autoplay with pause/play
• ✅ Navigation arrows
• ✅ Pagination dots
• ✅ SVG icon sprites
• ✅ Responsive breakpoints

How to Use¶

1. Add Widget¶

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

2. Configuration¶

Blaze Slider Configuration¶

Desktop Config¶

{
    "all": {
        "enablePagination": true,
        "enableAutoplay": true,
        "autoplayInterval": 5000,
        "stopAutoplayOnInteraction": true,
        "transitionDuration": 800,
        "slidesToShow": 4,
        "slidesToScroll": 4,
        "slideGap": "32px"
    }
}

Responsive Breakpoints¶

{
    "(max-width: 800px)": {
        "slidesToShow": 3,
        "slidesToScroll": 3,
        "slideGap": "16px"
    },
    "(max-width: 550px)": {
        "slidesToShow": 2,
        "slidesToScroll": 2,
        "slideGap": "16px"
    }
}

Carousel Structure¶

<div class="blaze-slider" data-config='...'>
    <div class="blaze-container">
        <div class="blaze-track-container">
            <div class="blaze-track">
                <div class="banner-slide">...</div>
                <div class="banner-slide">...</div>
                <!-- More slides -->
            </div>
        </div>

        <button class="blaze-prev">Previous</button>
        <button class="blaze-next">Next</button>
    </div>
</div>

Pause/Play Feature¶

$el.find('.blaze-pause').on('click', (event) => {
    event.preventDefault();

    if (slider.config.enableAutoplay) {
        slider.stopAutoplay();
        $el.addClass('paused');
    } else {
        slider.startAutoplay();
        $el.removeClass('paused');
    }
});

UI States¶

• Playing: Normal icon
• Paused: .paused class added

Navigation¶

Arrow Buttons¶

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

Pagination Dots¶

• Auto-generated by Blaze Slider
• Click to navigate to slide
• Active dot highlighted

Click-to-Navigate¶

Banners support clickable links:

widgetElement.querySelectorAll('[data-href]').forEach((el) => {
    el.addEventListener('click', () => {
        if (!editMode) {
            window.location = el.dataset.href;
        }
    });
});

SVG Icons¶

Widget injects SVG sprite:

function injectIconSvg(iconUrl) {
    SVGSpriteInject(iconUrl, {
        onInjected: (el) => {
            el.setAttribute('style', 'display:none');
            el.setAttribute('data-src', iconUrl);
        }
    });
}

Usage Examples¶

Category Banners¶

Slides: 4-6 category banners
Slides to Show: 4 (desktop), 2 (mobile)
Autoplay: true
Gap: 32px

Promo Banners¶

Slides: Multiple promo images
Slides to Show: 3 (desktop), 1 (mobile)
Autoplay: true
Interval: 4000ms

Brand Carousel¶

Slides: Brand logos
Slides to Show: 6 (desktop), 3 (mobile)
Autoplay: true
Gap: 24px

Responsive Behavior¶

Performance¶

Blaze Slider Advantages¶

• Lightweight (~3KB)
• CSS-based animations
• No jQuery dependency
• Efficient touch handling

Image Optimization¶

• Use appropriate image sizes
• Lazy load if below fold
• WebP format preferred

Inline Editing¶

1. Enable Edit Mode in Page Builder
2. Click on slide to edit
3. Edit content/images
4. Links not active in edit mode

Accessibility¶

• ARIA labels for navigation
• Keyboard navigation support
• Pause button for autoplay
• Semantic HTML structure

Notes¶

1. Image sizes: Ensure all banners same size
2. Slides count: Should be >= slidesToShow
3. Autoplay: User can pause
4. Mobile: Test touch swipe
5. Gap: Adjust according to design
6. Links: Test in preview mode