多个 Slick 轮播问题

Question

我正在使用带有幻灯片同步功能的Slick.js插件。我遇到的问题是，如果在单个页面上使用多个滑块，并点击下一个或上一个按钮，插件会为页面上所有滑块执行该操作。我想知道是否有任何方法可以使用JQuery让每个滑块上的下一个和上一个都能正常工作，而不是针对所有滑块？谢谢。

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
});

- egurb

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
  });

});

- kanudo

---

在这个例子中参数是如何传递的？我漏掉了什么吗？ - Eric Cicero

@EricCiCero 哪些参数？ - kanudo

同样适用于自定义导航，使用appendArrows也非常好。 - frazras

这对我非常有效，除了一个奇怪的原因，当我的选择器是一个ID时，它只能为第一个滑块工作。但是当我将选择器更改为类时，它适用于所有滑块。如果有人遇到同样的问题，我想分享一下。谢谢@kanudo - Kyle Klaiber

Answer 2

请在 id 上调用您的 jQuery，而不是 class。

点击下一个或上一个按钮时，插件将对页面上所有滑块执行操作。

这是因为您正在基于 class 名称调用 jQuery，因此它将影响所有具有相应 class 的元素。

HTML

<div class="slider" id="slider_1">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>
<div class="slider-nav" id="slider_nav_1">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>
<div class="slider" id="slider_2">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>
<div class="slider-nav" id="slider_nav_2">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

jQuery

var sliders = {
  1: {slider : '#slider_1', nav: '#slider_nav_1'},
  2: {slider : '#slider_2', nav: '#slider_nav_2'},
  3: {slider : '#slider_3', nav: '#slider_nav_3'}
};

$.each(sliders, function() {

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

});

- kanudo

---

感谢您的回应，我也想到了解决方案，但考虑到页面上有20多个滑块，我希望能找到更好的方法，比如使用“each”方法或其他方法。无论如何，如果找不到其他解决方案，我会接受您的建议。再次感谢。 - egurb

你为什么给nav和slider分别分配Slick？是有不同的要求或其他原因吗？ - kanudo

刚刚按照插件主页上的说明进行了操作。 - egurb

现在请看答案，我用each循环替换了解决方案。 - kanudo

是的，这是另一个很好的解决方案，但对我的需求仍不完美。我刚刚发现了另一个完美适合我的解决方案，但它没有导航。如果您能看一下这个fiddle http://jsfiddle.net/81t4pkfa/2/ 并帮助我使用这个示例解决这个问题，我将不胜感激。再次感谢您的努力。 - egurb

可以做到，只需要动态分配ID即可。我会很快发布解决方案。而且这确实是一种漂亮、干净、可爱的方法。 - kanudo

Answer 3

这里有一个简单的解决方案

调用每个滑块类并执行以下操作：

$('.slider').each(function(){
    $(this).slick({
        slidesToShow: 2,
        slidesToScroll: 1,
        centerMode: true,
        prevArrow: $(this).parent().find('.arrow-left'),
        nextArrow: $(this).parent().find('.arrow-right')    
    });
  });

我的这边完美运行。

- Soyeb Ahmed

Answer 4

我经常使用这段代码：

$(function () {
    $('.slider-for').each(function(num, elem) {
        elem = $(elem);
        elem.slick({
            slidesToShow: 1,
            slidesToScroll: 1,
            arrows: false,
            draggable: false,
            fade: true,
            asNavFor: '.slider-nav'
        });

        elem.next('.slider-nav-thumbnails').slick({
            slidesToShow: 3,
            slidesToScroll: 1,
            asNavFor: '.slider-for',
            dots: false,
            arrows: false,
            vertical: true,
            draggable: false,
            centerMode: false,
            focusOnSelect: true,
            responsive: [
                {
                    breakpoint: 769,
                    settings: {
                        vertical: false
                    }
                }
            ]
        });
    });
});

- devzom