jquery - 多个光滑 slider 问题

Question

我正在使用 Slick.js 插件及其 slider 同步功能。我遇到的问题是，如果我在单个页面上使用多个 slider ，则通过单击下一个或上一个按钮插件会对页面上的所有 slider 执行操作。我想知道我可以用 JQuery 做些什么来让页面上的每个 slider (而不是所有 slider )的下一个和上一个工作？提前致谢。

HTML

<div class="slider">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
</div>                                                            
<div class="slider-nav">                                  
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
</div>

流畅的运行脚本

$('.slider').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: false,
    fade: true,
    asNavFor: '.slider-nav'
});
$('.slider-nav').slick({
    slidesToShow: 4,
    slidesToScroll: 1,
    asNavFor: '.slider',
    dots: true,
    arrows: true,
    centerMode: false,
    focusOnSelect: true
});

Answer 1

这是另一个带有each循环的解决方案，它使用 class="slider-for" 迭代所有元素。并动态分配id致所有.slider-for元素及其各自.slider-nav元素。

但有一个问题，它们应该按完美的顺序放置。

jQuery

$('.slider-for').each(function(key, item) {

  var sliderIdName = 'slider' + key;
  var sliderNavIdName = 'sliderNav' + key;

  this.id = sliderIdName;
  $('.slider-nav')[key].id = sliderNavIdName;

  var sliderId = '#' + sliderIdName;
  var sliderNavId = '#' + sliderNavIdName;

  $(sliderId).slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: false,
    fade: true,
    asNavFor: sliderNavId
  });

  $(sliderNavId).slick({
    slidesToShow: 4,
    slidesToScroll: 1,
    asNavFor: sliderId,
    dots: true,
    arrows: true,
    centerMode: false,
    focusOnSelect: true
  });

});