Support

Account

Home Forums Gutenberg Initilize swiper slider in editor (gutenberg)

Helping

Initilize swiper slider in editor (gutenberg)

  • 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);
  • Any progress with this? Facing the same problem.

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Cookie Policy. If you continue to use this site, you consent to our use of cookies.