見出し画像

slick.jsでクリックした画像へスライドさせる追加js

追記:
調べてたら「focusOnSelect」をtrueにするとできることがわかりました。

var gallery = $('ul.gallery');
gallery.slick({
    focusOnSelect:true,
});

下記は、focusOnSelectが動かないときの対処法として参考にしてください。

---- ----- ---- -----

centerModeとかで横にチラ見えしている前後のスライドをクリックしたとき、そのスライドへ移動してくれたらいいなぁと思ったのでちょっとだけ追加。

オプションのパラメータにないかなと思って調べたけど無さそうだった(ググり力不足?)ので、実装。

コード

var slider = $('.Examples');
$('li[data-slick-index]').click(function (e) {
   var slideindex = $(this).data('slick-index');
   slider.slick('slickGoTo', slideindex);
});

slick.jsがスライドにした要素には"data-slick-index"という属性が付与され、これはスライド内の通し番号(0~)を意味します。

"data-slick-index"という属性を持つ要素がクリックされたとき(2行目)
その要素の通し番号(3行目)まで
指定したスライド(1行目)を移動させます(4行目の"slickGoTo")

ですね。

めでたしめでたし。

この記事が気に入ったらサポートをしてみませんか?