Support

Account

Home Forums Gutenberg Trying to use Splide slider in ACF block

Helping

Trying to use Splide slider in ACF block

  • Hi, I’m trying to use Splide slider in ACF Blocks and followed this guide: Building a custom slider with a few adjustments.

    Got it to work fine for one slider per page but not multiple. Here is my javascript for initialize the slider:

    (function($){
      
      /**
      * initializeBlock
      *
      * Adds custom JavaScript to the block HTML.
      *
      * @date    15/4/19
      * @since   1.0.0
      *
      * @param   object $block The block jQuery element.
      * @param   object attributes The block attributes (only available when editing).
      * @return  void
      */
      
      var initializeBlock = function( $block ) {
          var splide = new Splide( '.splide', {
            perPage: 3,
            gap: '2rem',
            breakpoints: {
              1000: {
                perPage: 2,
                gap    : '1rem'
              },
              480: {
                perPage: 1,
                gap    : '.7rem'
              }
            },
          } ).mount();
          $block.find('.splide').splide;
      }
      
      // Initialize each block on page load (front end).
      $(document).ready(function(){
        $('.wof-slider').each(function(){
          initializeBlock( $(this) );
        });
      });
      
      // Initialize dynamic block preview (editor).
      if( window.acf ) {
        window.acf.addAction( 'render_block_preview/type=wof-slider', initializeBlock );
      }
      
    })(jQuery);

    If I look in the documentations for Splide, the solution for initializing multiple sliders on a page is either this

    new Splide( '#slider1' ).mount();
    
    new Splide( '#slider2' ).mount();
    
    new Splide( '#slider3' ).mount();

    or this

    var elms = document.getElementsByClassName( 'splide' );
    
    for ( var i = 0; i < elms.length; i++ ) {
      new Splide( elms[ i ] ).mount();
    }

    How do I incorporate that in my initializing script so it works both in Gutenberg and frontend?

  • Sorry misread your question, you want it showing in backend not just front end, ignore my answer!

    if ($(".slide-carousel").length) {
      var slidesliders = document.querySelectorAll('.splide.slide-carousel');
      for (var i = 0; i < slidesliders.length; i++) {
          var slideslider = new Splide(slidesliders[i], {
            type: 'loop',
            perPage: 3,
            updateOnMove: true,
            gap: '4rem',
            padding:'4rem',
             autoHeight: true,
             focus: 'center',
          autoplay: false,
      rewind: true,
      arrows: true,
    
      });
      slideslider.mount()
    }
    }
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.