web-dev-qa-db-ja.com

kenwheeler / slick現在のスライドをdomまたはjqueryオブジェクトとして取得する方法は？

slick を使用すると、次の行に沿って単純なカルーセルが作成されます。

<div class="carousel">
  <div class="image"><img src="http://path/to/image.jpg" data-caption="Caption 1"></div>
  <div class="image"><img src="http://path/to/image2.jpg" data-caption="Caption 2"></div>
  <div class="image"><img src="http://path/to/image3.jpg" data-caption="Caption 3"></div>
</div>

カルーセルをonAfterChange関数で初期化して、別のdivのキャプションを更新しようとしていますが、このdivをdomまたはjqueryオブジェクトとして取得する方法について少し混乱していますか？

$('.carousel').slick({
  lazyLoad: 'progressive',
  onAfterChange: function(slider,index){
    console.log(???);
  }
});

ここで、sliderはカルーセルオブジェクトを返し、indexは現在のスライドを返します。

これからdata-caption値を取得するにはどうすればよいですか？

javascriptjquerycarousel
9
waffl

Arg、お詫びします。githubの問題の解決策を見つけました onAfterChange＃411の現在のスライド属性へのアクセス 。

sliderはカルーセルを参照するため、スライダーにアクセスすると次のようになります。

$(slider)そして$(slider.$slides.get(index))で特定のスライドにアクセスできます

したがって、上記の私の質問を参照すると、次のようになります。

$(slider.$slides.get(index)).data('caption');
11
waffl
$('.SlickContainer').on('beforeChange', function(event, slick, currentSlide, nextSlide){
    var CurrentSlideDom=$(slick.$slides.get(currentSlide));
    var NextSlideDom=$(slick.$slides.get(nextSlide));
});
3
Miro Margalitadze

これを試して

$('.carousel').on('afterChange', function() {
    var dataId = $('.slick-current').attr("data-slick-index");    
    console.log(dataId);
});
3
Udara

変更前

jQuery('.pt-slick-carousel__slides').on('beforeChange', function(event, slick, currentSlide, nextSlide){
        console.log(jQuery('.pt-slick-carousel__slides .slick-active').attr('data-slick-index'));
        console.log(jQuery('.pt-slick-carousel__slides .slick-active').attr('id'));
});

AfterChange

jQuery('.pt-slick-carousel__slides').on('afterChange', function(event, slick, currentSlide, nextSlide){
        console.log(jQuery('.pt-slick-carousel__slides .slick-active').attr('data-slick-index'));
        console.log(jQuery('.pt-slick-carousel__slides .slick-active').attr('id'));
});
0
Muddasir Abbas