web-dev-qa-db-ja.com

Slick Carouselで、イベントでスライド要素を取得するにはどうすればよいですか?

スリックカルーセル: http://kenwheeler.github.io/slick/

イベントでスライドの要素を取得するにはどうすればよいですか?例えば:

   .on('afterChange', function (slick, currentSlide)
   {
      var currentSlideElement = //Get current slide element here
   });

最初の引数はeventオブジェクトのようですが、そのtarget(またはcurrentTarget)は常にスライドコンテナであり、2番目の引数は滑らかなオブジェクトのようです... 。

10
Yuval A.

このように最初の引数「イベント」を含める必要があります

$('.your-element').on('afterChange', function(event, slick, currentSlide){
  console.log(currentSlide);
});    

そうしないと、「currentSlide」引数は「slick」になります

14
Abraham Uribe

'afterChange'イベントでDOM要素を取得するには:

$('.your-element').on('afterChange', function (event, slick, currentSlide) {
    var elt = slick.$slides.get(currentSlide);
});
7
Vénizia
// Get the current slide
var currentSlide = $('.your-element').slick('slickCurrentSlide');

ソース: https://github.com/kenwheeler/slick

2
Leonid Usachov

'currentSlide'パラメータはnotを実行します。一度に複数のスライドを表示する場合、期待どおりに機能します。

この例で私が見つけた方法は、現在のスライドに追加される「slick-current」クラスを使用することです。

例えばここで、sliderはカルーセルのHTML要素ラッパーです。

$('.your-element').on('afterChange', function(event, slick, currentPage){
    var currentIndex = parseInt(slider.querySelector('.slick-current').getAttribute('data-slick-index'));
}); 
0