Home Forums Gutenberg Bootstrap 5 Carousel Enqueue block js


Bootstrap 5 Carousel Enqueue block js

  • 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:

        var initializeBlock = function( $block ) {
                interval:	2000,
    			pause:		"hover"
        // Initialize each block on page load (front end).
                initializeBlock( $(this) );
        // Initialize dynamic block preview (editor).
        if( window.acf ) {
            window.acf.addAction( 'render_block_preview/type=testimonials', initializeBlock );

    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.

  • 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!

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

You must be logged in to reply to this topic.