多个滑动滑块问题 [英] Multiple Slick Sliders Issue

问题描述

我正在使用Slick.js插件及其Slider Syncing功能.我遇到的问题是，如果我在单个页面上使用多个滑块，则通过单击下一步"或上一步"按钮，插件将对页面上的所有滑块执行操作.我想知道JQuery有什么我可以做的事，以便页面上的每个滑块都具有下一个和上一个功能吗?提前致谢.

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>

快速运行脚本

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

推荐答案

这是另一个解决方案，其中每个循环都使用class="slider-for"遍历所有元素，并将id动态分配给所有.slider-for元素及其各自.slider-nav元素.

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

});

这篇关于多个滑动滑块问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！