Home Forums Gutenberg Problems with Slick slider in ACF v6


Problems with Slick slider in ACF v6

  • I’m having an issue with Slick Slider in the admin preview with ACF 6 using the new block.json way to set up blocks.

    I followed an ACF tutorial by Elliot here:

    In ACF v5 using the old method to add blocks this worked fine, but after updating to ACF 6 and using block.json the block crashes and says ‘This block has encountered an error and cannot be previewed.’ if I try to edit it. In the console I see this:

    react-dom.min.js?ver=17.0.1:9 TypeError: Cannot read properties of null (reading 'add')
        at e.initADA (slick.min.js?ver=6.1.1:1:19335)
        at e.init (slick.min.js?ver=6.1.1:1:19101)
        at new <anonymous> (slick.min.js?ver=6.1.1:1:2832)
        at i.fn.slick (slick.min.js?ver=6.1.1:1:42781)
        at initializeBlock (home-slider.js?ver=6.1.1:19:39)
        at o (acf.min.js?ver=6.0.5:1:1417)
        at Object.doAction (acf.min.js?ver=6.0.5:1:587)
        at n.doAction (acf.min.js?ver=6.0.5:1:18745)
        at G.renderBlockPreviewEvent (acf-pro-blocks.min.js?ver=6.0.5:1:31066)
        at G.componentDidAppend (acf-pro-blocks.min.js?ver=6.0.5:1:30504)

    I’m using very similar code to the example in our tutorial to inisialise the slider, and it worked fine before I updated from ACF 5 to 6. My code looks like this:

         * 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 ) {
            // $block.find('img').doSomething();
                fade: true,
                infinite: true,
                dots: false,
                prevArrow: $('.nav_prev'),
                nextArrow: $('.nav_next'),
                autoplay: true,
                autoplaySpeed: 8000,
                speed: 1500,
                pauseOnHover: false,
                pauseOnFocus: false,
        // 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=home-slider-block', initializeBlock );

    Any help would be greatly appreciated.

  • Any luck on this? I have a similar problem

  • Nope. I asked on Stack Exchange too and no one had anything there either. I’ve yet to find anyone able to provide a way to get sliders working properly in the editor since ACF v6.

    I even got in touch with ACF support and at first they were quite responsive, but eventually they just told me that it was a Slick Slider problem (despite me telling them I had the same issue with a different slider library too) and then stopped responding.

    I just make the slider non-functional in the admin area these days, with admin-only styles to make it look like the front end version.

    If you find a solution please do come back and share it here! It might help other people too.

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

You must be logged in to reply to this topic.