Slick slider block settings

adding a block with all the possible slick slider settings is a bit of a chore so the following is a way to simplify it by using data-slide attributes.

$data_slick = get_field('data_slick');
$responsive = get_field('responsive');
if ($responsive) {
	$responsive = ', "responsive": [' . $responsive . ']';
} else {
	$responsive = '';
}
data-slick='{<?php if ($data_slick) { echo $data_slick . $responsive; } ?>}'

c

Example field settings for data_slick text area ACF field:

“slidesToShow”: 2, “dots”: false, “slidesToScroll”: 1, “autoplay”: true, “infinite”: true, “speed”: 200, “fade”: true

Example field settings for responsive options using a text area ACF field:

{“breakpoint”:600, “settings”:{“slidesToShow”: 1, “dots”: true}}

or

{“breakpoint”:600, “settings”:{“slidesToShow”: 1, “dots”: true}}, {“breakpoint”:1000, “settings”:{“slidesToShow”: 2, “dots”: true}}

Important

don’t having trailing commas where they are not needed!

use double quotes for all properties

check that each of your settings at each of the breakpoints are being applied!

More details: https://kenwheeler.github.io/slick/