Multiple Slick Sliders Issue

问题

I am using Slick.js plugin with its Slider Syncing feature. The issue I am having is that if I use multiple sliders on a single page, by clicking next or prev buttons plugin performs the action for all sliders on page. I wonder is there anything I could do with JQuery to have the next and prev work for each slider on page not for all? Thanks in advance.

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>

SLICK RUN SCRIPT

$('.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
});

回答1:

Here is another solution with an each loop which iterates over all elements with class="slider-for"and dynamically assign id to all the .slider-for elements and their respective .slider-nav elements.

But there is a catch, they should be placed in perfect order.

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

});

回答2:

Call your jquery on id and not class.

by clicking next or prev buttons plugin performs the action for all sliders on page

This is because you are calling jQuery on class name and thus it will affect all the elements have that respective 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
  });

});

来源：https://stackoverflow.com/questions/35618158/multiple-slick-sliders-issue

标签

jquery

slick.js