【slick】data-slick属性を使ってオプションを指定する方法

2024-03-31

jQueryのスライダープラグイン「slick.js」でHTMLの「data-slick」属性を使ってスライダーのオプションを指定する方法をご紹介します｡

サンプル

まずはサンプルをご覧ください｡

HTML

.sliderの「data-slick」属性にオプションを入れます｡

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

「'」と「"」の扱いや､最後の要素の末尾に「,」が入らないように気をつけてください｡

JS

slickを実行するだけ｡オプションなどは指定していません｡

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

結果

できたスライダーがこちら｡ data-slick属性で指定したオプションが反映されています｡

メリット・デメリット

メリット

メリットとしては､同じサイト内にいろいろな形のスライダーがあるとき

slickスライダーいろいろな形

JSにslickを1つ書くだけで済みます｡

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

また､HTMLは書き換えられるけど､JSは簡単に書き換えられない環境などで便利だと思います｡

デメリット

サムネイル付きスライダーや､スマホのみスライダーにするなど､高度なことをしたい場合は､結局JSの編集が必要です｡

最初からこの方法は使わないほうが綺麗かもしれません｡

JSとどっちが優先される？

data-slick属性でfade:trueを､JSでfade:falseを指定してみます｡

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

フェードになっているので､data-slick属性の方が優先されました｡

以上､slickスライダーのオプションをHTML属性を使って指定する方法でした｡

使いどころによっては便利だと思いますので､ぜひご活用ください｡

「できました！」などの報告もお待ちしております｡