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