jQuery 多个光滑的滑块问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35618158/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Multiple Slick Sliders Issue
提问by Emil Gurbanov
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.
我正在使用带有滑块同步功能的 Slick.js 插件。我遇到的问题是，如果我在单个页面上使用多个滑块，则通过单击下一个或上一个按钮插件执行页面上所有滑块的操作。我想知道我可以用 JQuery 做些什么来让页面上的每个滑块的下一个和上一个工作不是全部？提前致谢。
HTML
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
});
回答by kanudo
Here is another solution with an each loop which iterates over all elements with class="slider-for"and dynamically assign idto all the .slider-forelements and their respective .slider-navelements.
这是另一个带有 each 循环的解决方案，它迭代所有元素class="slider-for"并动态分配id给所有.slider-for元素及其各自的.slider-nav元素。
But there is a catch, they should be placed in perfect order.
但是有一个问题，它们应该排列整齐。
jQuery
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
});
});
回答by kanudo
Call your jquery on idand not class.
调用你的 jquery onid而不是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.
这是因为您在类名上调用 jQuery，因此它将影响具有相应类的所有元素。
HTML
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
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
});
});
