javascript - 如何使用插件方法获取点击元素的索引？

Question

我正在使用 Slick JS slider ，我正在尝试获取单击的幻灯片的索引。我可以使用名为 'getSlick'

的方法使用所有属性

每当单击幻灯片时，以下代码都会记录所有索引。我只想点击幻灯片的索引。我究竟做错了什么？

  $('.sy-images-slides-primary .slick-slide').click(function(){
    console.log($(".sy-images-slides-primary").slick("getSlick").$slides);
  });

// // define inner slider
$('.slider').slick({
  dots: false,
  infinite: true,
  slidesToShow: 5,
  slidesToScroll: 5,
  centerMode: true,
  centerPadding: 110,
  focusOnSelect: true,
  variableWidth: true
});

  $('.slider .slick-slide').click(function () {
    $(".slider").slick("getSlick").$slides.each(function (index, slide) {
      console.log(index);
    });
  });

.slick-slide {
    padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" rel="stylesheet" />
<script src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

<div class="slider">
<div><img src="http://placehold.it/50x50"></div>
<div><img src="http://placehold.it/50x50"></div>
<div><img src="http://placehold.it/50x50"></div>
<div><img src="http://placehold.it/50x50"></div>
<div><img src="http://placehold.it/50x50"></div>
<div><img src="http://placehold.it/50x50"></div>
<div><img src="http://placehold.it/50x50"></div>
<div><img src="http://placehold.it/50x50"></div>
<div><img src="http://placehold.it/50x50"></div>
<div><img src="http://placehold.it/50x50"></div>
</div>

Answer 1

如果您希望在单击幻灯片后立即执行此操作，请使用插件事件“afterChange”，而不是像您那样使用额外的点击监听器。

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

其中currentSlide是最后滑动的元素的索引。

如果您需要一个用于点击幻灯片本身的监听器，您可以从数据属性中读出位置(您必须规范化该值，因为还有一个 -1，但这应该很容易工作)。

您更改的代码:

// // define inner slider
$('.slider').slick({
  dots: false,
  infinite: true,
  slidesToShow: 5,
  slidesToScroll: 5,
  centerMode: true,
  centerPadding: 110,
  focusOnSelect: true,
  variableWidth: true
});

$('.slider').on('afterChange', function (event, slick, currentSlide) {
  console.log('afterChange, currentSlide: ', currentSlide);
});
$('.slick-slide').on('click', function(ev){
  console.log('onClick slick-index:', $(ev.currentTarget).data('slick-index'));
});

.slick-slide {
    padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" rel="stylesheet" />
<script src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

<div class="slider">
<div><img src="http://placehold.it/50x50"></div>
<div><img src="http://placehold.it/50x50"></div>
<div><img src="http://placehold.it/50x50"></div>
<div><img src="http://placehold.it/50x50"></div>
<div><img src="http://placehold.it/50x50"></div>
<div><img src="http://placehold.it/50x50"></div>
<div><img src="http://placehold.it/50x50"></div>
<div><img src="http://placehold.it/50x50"></div>
<div><img src="http://placehold.it/50x50"></div>
<div><img src="http://placehold.it/50x50"></div>
</div>