Slickの矢印ナビクリック後、現在表示させてるスライドのリストを連動させる

アバター画像 adachi

1

こんにちは!
KNAP足立です!
最近Slickで色々と触っているうちにタイトルの機能を実装したので
ブログ書いてみようって思いました!☺️
デモはこちら〜

See the Pen SlickGetNumber by knap_develp (@knap_develp) on CodePen.

やってること

矢印ナビをクリックした後に
Slickの現在のスライドのインデックス番号を取得し返してくれるメソッドslickCurrentSlideを使用し、取得後それを変数に入れてから

 SliderCurrentSlide = $('.js-slick').slick('slickCurrentSlide');

該当のスライドリスト(js-slick_list)にeqメソッドを用いクラスを付与させています。
※eqメソッドはHTML要素の順番を指定してあげることで指定した要素にだけクラスを付与するといったことができます。

  SliderList.eq(SliderCurrentSlide).addClass('is-active');

以上がデモとなりますー!
では本日はこのへんで〜👋

アバター画像

ぽちっとおうえん!

シェア

  • Facebook
  • LINE
  • X
Vueのデータの受け渡しについての備忘録 カスタムプロパティとSVGを使ったら色違いが簡単にできた話