Trying to use Splide slider in ACF block

• markushasselryd

• May 31, 2022 at 5:55 am

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?

• kevinneal

• August 10, 2022 at 4:59 am

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()
}
}