Reply To: Problems with Slick slider in ACF v6

• Jovan89

• August 28, 2024 at 10:29 am

Had the same issue. Since the Slick is modifying the DOM, it cannot work with JSX support, so you need to set it to false. In my case it looks something like this:

    "supports": {
        "jsx": false,
        "align": ["full"],
        "anchor": true,
        "className": true,
        "reusable": false
    },

My JS is similar to the original code:

import './styles.scss';

import $ from 'jquery';
import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';
import 'slick-carousel';

$(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
	 */
	let initializeBlock = function( $block ) {
		const $slider = $block.find('.slider');

		const slickSettings = {
			slidesToShow: 4,
			slidesToScroll: 4,
			lazyLoad: 'ondemand',
			dots: true,
			arrows: false,
			responsive: [
				{
				breakpoint: 1281,
					settings: {
						slidesToShow: 3,
						slidesToScroll: 3,
					},
				},
				{
				breakpoint: 600,
					settings: {
						slidesToShow: 2,
						slidesToScroll: 2,
					},
				},
			],
			adaptiveHeight: true,
			focusOnSelect: true
		}

		$slider.not('.slick-initialized').slick(slickSettings);
	}

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

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

I know it’s the old question, but just in case someone else encounters the same issue.