Initilize swiper slider in editor (gutenberg)

• akaRob

• October 23, 2020 at 11:15 pm

I’m trying to build woo-commerce slider block with swiper slider (not slick)
I’m having trouble initializing the slider in the editor, it does no work and the script does not run in the backend editor,

(function($){

var mySwiper = new Swiper('.product-slider', {
// Optional parameters
    slidesPerView: 4,
    spaceBetween: 30,
    paginationClickable: true,
    loop: true,
    autoplay: {
        delay: 3000,
    },
    // Navigation arrows
    pagination: {
        el: '.swiper-pagination',
        type: 'bullets',
        clickable: true
    },
});

var initializeBlock = function( $block ) {
    $block.find('.product-slider').mySwiper();
};

// Initialize each block on page load (front end).
$(document).ready(function(){
    $('.product-slider').each(function(){
        initializeBlock( $(this) );
    });
});

// Initialize dynamic block preview (editor).
if( window.acf ) {
    window.acf.addAction( 'render_block_preview/type=featured-product', initializeBlock );
}

})(jQuery);

• markushasselryd

• August 17, 2021 at 10:06 am

Any progress with this? Facing the same problem.

• mvocamargo

• January 23, 2023 at 9:03 pm

I didn’t find an answer anywhere so I posting what works for me.

Call the swiper instance inside a window.load.

jQuery:

var initializeBlock = function( $block ) {
    $(window).load(function(){
        $block.find('.product-slider').mySwiper();
    });
};

The same principle can be used with vanilla using window.addEventListener('load').