Как получить индекс элемента, на который щелкнули, используя метод плагина? - PullRequest
0 голосов
/ 28 июня 2018

Я использую слайдер Slick JS и пытаюсь получить индекс клика по слайду. Все атрибуты доступны для меня с помощью метода '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>

1 Ответ

0 голосов
/ 28 июня 2018

Если вы хотите это сразу после нажатия слайда, используйте плагин-событие "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>
...