スリックカルーセル: http://kenwheeler.github.io/slick/
イベントでスライドの要素を取得するにはどうすればよいですか?例えば:
.on('afterChange', function (slick, currentSlide)
{
var currentSlideElement = //Get current slide element here
});
最初の引数はevent
オブジェクトのようですが、そのtarget
(またはcurrentTarget
)は常にスライドコンテナであり、2番目の引数は滑らかなオブジェクトのようです... 。
このように最初の引数「イベント」を含める必要があります
$('.your-element').on('afterChange', function(event, slick, currentSlide){
console.log(currentSlide);
});
そうしないと、「currentSlide」引数は「slick」になります
'afterChange'イベントでDOM要素を取得するには:
$('.your-element').on('afterChange', function (event, slick, currentSlide) {
var elt = slick.$slides.get(currentSlide);
});
// Get the current slide
var currentSlide = $('.your-element').slick('slickCurrentSlide');
'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'));
});