[slick slider] How to specify options using the data-slick attribute

2024-03-31

We will introduce how to specify slider options using the HTML "data-slick" attribute with the jQuery slider plugin "slick.js".

Sample
Pros and Cons
Which takes precedence, JS or data-slick?

Sample

First, please see the sample.

HTML

Add options to the "data-slick" attribute of .slider.

<div class="slider" data-slick='{
				"autoplay": true,
				"centerMode": true,
				"variableWidth": true,
				"responsive": [
					{
					"breakpoint": 767,
					"settings": {
						"centerMode": false,
						"variableWidth": false
						}
					}
				]
				}'>
	<div class="slide"><img src="img01.jpg"></div>
	<div class="slide"><img src="img02.jpg"></div>
	<div class="slide"><img src="img03.jpg"></div>
	<div class="slide"><img src="img04.jpg"></div>
</div>

Be careful with the handling of single and double quotes, and ensure there is no comma at the end of the last element.

JS

Just execute slick. No options are specified.

$(".slider").slick();

Result

Here is the created slider. The options specified by the data-slick attribute are reflected.

Pros and Cons

Pros

The advantage is that when there are various types of sliders on the same site,

slick slider various shapes

You only need to write one slick call in JS.

$(".slider").slick();

It is also useful in environments where HTML can be rewritten, but JS cannot be easily modified.

Cons

If you want to do advanced things, such as a slider with thumbnails or a slider only for smartphones, you will eventually need to edit the JS.

It might be cleaner not to use this method from the beginning.

Which takes precedence, JS or data-slick?

Let's try specifying fade:true with the data-slick attribute and fade:false with JS.

<div class="slider" data-slick='{
				"autoplay": true,
				"fade": true
				}'>
	<div class="slide"><img src="img01.jpg"></div>
	<div class="slide"><img src="img02.jpg"></div>
	<div class="slide"><img src="img03.jpg"></div>
	<div class="slide"><img src="img04.jpg"></div>
</div>

<script>
	$(function(){
		$(".slider").slick({
			fade: false
		});
	});
</script>

Since it's fading, the data-slick attribute took precedence.

That's all for how to specify slick slider options using HTML attributes.

I think it can be useful depending on the situation, so please make use of it.