Bootstrap 5 Carousel Enqueue block js

• jarvis

• April 5, 2022 at 4:30 am

Morning!

We have a custom ACF block which we called carousel.

This has various custom fields and renders on the page as a Bootstrap carousel.

When using Bootstrap 4, we’d enqueue a carousel.js script for the block which had:

(function($){

    var initializeBlock = function( $block ) {
        $block.find('.carousel-item').carousel({
            interval:	2000,
			pause:		"hover"
        });     
    }

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

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

})(jQuery);

This worked.

However, Bootstrap 5 has changed the event handler to:

var myCarousel = document.querySelector('.carousel')
var carousel = new bootstrap.Carousel(myCarousel, {
	interval: 5000,
	wrap: false
})	

I’m struggling how to implement this into the carousel.js script.

Any help is very much appreciated.
Thanks

• jarvis

• March 14, 2023 at 8:55 am

Hi All,

I’m just wondering if anyone had any joy with an ACF block and Bootstrap 5’s carousel scripts?
Any help would be much appreciated!
Thanks