光滑的滑块同步多个滑块-3 [英] Slick Slider Syncing Multiple sliders - 3

查看：52
本文介绍了光滑的滑块同步多个滑块-3的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在使用具有3个滑块的平滑滑块同步.使用2个滑块可以正常工作，但是当我尝试使用3个类别的3个滑块时，仍然只有2个可以工作.

示例» https://jsfiddle.net/rk0tuoy7/6/ 

  $('.slider-for').slick({slidesToShow:1，slidesToScroll:1箭头:错误，淡入淡出:错误，asNavFor:'.slider-nav'，lazyLoad:按需"});$('.slider-x').slick({slidesToShow:1，slidesToScroll:1箭头:正确，淡入淡出:错误，asNavFor:'.slider-nav'，lazyLoad:'ondemand'，点:假});$('.slider-nav').slick({centerMode:true，centerPadding:'60px'，slidesToShow:5slidesToScroll:1asNavFor:'.slider-for'，点:是的，focusOnSelect:true，lazyLoad:按需"});  

  @import url('//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css');@import url('//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.css');.slick-slide {背景:#3a8999;白颜色;填充:40px 0;font-size:30px;字体家族:"Arial"，"Helvetica"；文本对齐:居中；}.slick-arrow:before {颜色:黑色;}.slick-dots {底部:-30px；}.slick-slide:nth-​​child(odd){背景:#e84a69;}  

 < div class ="slider slide-x">< div< h3> 2015</h3>/div< div< h3> 2014</h3>/div< div< h3> 2013</h3>/div< div< h3> 2012</h3>/div< div< h3> 2011</h3>/div< div< h3> 2010</h3>/div< div< h3> 2009</h3>/div< div< h3> 2008</h3>/div< div< h3> 2007</h3>/div< div< h3> 2006</h3>/div< div< h3> 2005</h3>/div< div< h3> 2004</h3>/div< div< h3> 2003</h3>/div< div< h3> 2002</h3>/div< div< h3> 2001</h3>/div< div< h3> 2000</h3>/div< div< h3> 1995</h3>/div</div>< div class ="slider slide-nav">< div< h3> 2015</h3>/div< div< h3> 2014</h3>/div< div< h3> 2013</h3>/div< div< h3> 2012</h3>/div< div< h3> 2011</h3>/div< div< h3> 2010</h3>/div< div< h3> 2009</h3>/div< div< h3> 2008</h3>/div< div< h3> 2007</h3>/div< div< h3> 2006</h3>/div< div< h3> 2005</h3>/div< div< h3> 2004</h3>/div< div< h3> 2003</h3>/div< div< h3> 2002</h3>/div< div< h3> 2001</h3>/div< div< h3> 2000</h3>/div< div< h3> 1995</h3>/div</div>< div class ="slider Slider-for">< div< h3> 2015</h3>/div< div< h3> 2014</h3>/div< div< h3> 2013</h3>/div< div< h3> 2012</h3>/div< div< h3> 2011</h3>/div< div< h3> 2010</h3>/div< div< h3> 2009</h3>/div< div< h3> 2008</h3>/div< div< h3> 2007</h3>/div< div< h3> 2006</h3>/div< div< h3> 2005</h3>/div< div< h3> 2004</h3>/div< div< h3> 2003</h3>/div< div< h3> 2002</h3>/div< div< h3> 2001</h3>/div< div< h3> 2000</h3>/div< div< h3> 1995</h3>/div</div>< script src ="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>< script src ="//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>

解决方案

似乎 asNavFor 选项可以用作普通的CSS选择器.您可以列出几个用逗号分隔的类:

 <代码> $('.slider-for').slick({asNavFor:'.slider-nav，.slider-x'，});$('.slider-x').slick({asNavFor:'.slider-for，.slider-nav'，});$('.slider-nav').slick({asNavFor:'.slider-for，.slider-x'，});

我删除了具有默认值的选项.

请检查结果: https://jsfiddle.net/glebkema/b6c2ayeg/ 

  $('.slider-for').slick({箭头:错误，asNavFor:'.slider-nav，.slider-x'，});$('.slider-x').slick({箭头:正确，asNavFor:'.slider-for，.slider-nav'，});$('.slider-nav').slick({箭头:正确，asNavFor:'.slider-for，.slider-x'，centerMode:true，centerPadding:'60px'，点:是的，focusOnSelect:true，slidesToShow:5});  

  @import url('//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css');@import url('//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.css');.slick-slide {背景:#3a8999;白颜色;填充:40px 0;font-size:30px;字体家族:"Arial"，"Helvetica"；文本对齐:居中；}.slick-arrow:before {颜色:黑色;}.slick-dots {底部:-30px；}.slick-slide:nth-​​child(odd){背景:#e84a69;}.slider {边距:0 30px;}  

 < div class ="slider slide-x">< div< h3> 2015</h3>/div< div< h3> 2014</h3>/div< div< h3> 2013</h3>/div< div< h3> 2012</h3>/div< div< h3> 2011</h3>/div< div< h3> 2010</h3>/div< div< h3> 2009</h3>/div< div< h3> 2008</h3>/div< div< h3> 2007</h3>/div< div< h3> 2006</h3>/div< div< h3> 2005</h3>/div< div< h3> 2004</h3>/div< div< h3> 2003</h3>/div< div< h3> 2002</h3>/div< div< h3> 2001</h3>/div< div< h3> 2000</h3>/div< div< h3> 1995</h3>/div</div>< div class ="slider slide-nav">< div< h3> 2015</h3>/div< div< h3> 2014</h3>/div< div< h3> 2013</h3>/div< div< h3> 2012</h3>/div< div< h3> 2011</h3>/div< div< h3> 2010</h3>/div< div< h3> 2009</h3>/div< div< h3> 2008</h3>/div< div< h3> 2007</h3>/div< div< h3> 2006</h3>/div< div< h3> 2005</h3>/div< div< h3> 2004</h3>/div< div< h3> 2003</h3>/div< div< h3> 2002</h3>/div< div< h3> 2001</h3>/div< div< h3> 2000</h3>/div< div< h3> 1995</h3>/div</div>< div class ="slider Slider-for">< div< h3> 2015</h3>/div< div< h3> 2014</h3>/div< div< h3> 2013</h3>/div< div< h3> 2012</h3>/div< div< h3> 2011</h3>/div< div< h3> 2010</h3>/div< div< h3> 2009</h3>/div< div< h3> 2008</h3>/div< div< h3> 2007</h3>/div< div< h3> 2006</h3>/div< div< h3> 2005</h3>/div< div< h3> 2004</h3>/div< div< h3> 2003</h3>/div< div< h3> 2002</h3>/div< div< h3> 2001</h3>/div< div< h3> 2000</h3>/div< div< h3> 1995</h3>/div</div>< script src ="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>< script src ="//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>

I'm using slick Slider Syncing with 3 sliders. With 2 sliders it works fine but when I try with 3 sliders with 3 classes still only 2 are working.

example » https://jsfiddle.net/rk0tuoy7/6/

$('.slider-for').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  arrows: false,
  fade: false,
  asNavFor: '.slider-nav',
  lazyLoad: 'ondemand'
});
$('.slider-x').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  arrows: true,
  fade: false,
  asNavFor: '.slider-nav',
  lazyLoad: 'ondemand',
  dots: false
});
$('.slider-nav').slick({
  centerMode: true,
  centerPadding: '60px',
  slidesToShow: 5,
  slidesToScroll: 1,
  asNavFor: '.slider-for',
  dots: true,
  focusOnSelect: true,
  lazyLoad: 'ondemand'
});

@import url('//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css');
@import url('//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.css');

.slick-slide {
  background: #3a8999;
  color: white;
  padding: 40px 0;
  font-size: 30px;
  font-family: "Arial", "Helvetica";
  text-align: center;
}

.slick-arrow:before {
  color: black;
}

.slick-dots {
  bottom: -30px;
}

.slick-slide:nth-child(odd) {
  background: #e84a69;
}

<div class="slider slider-x">
  <div><h3>2015</h3></div>
  <div><h3>2014</h3></div>
  <div><h3>2013</h3></div>
  <div><h3>2012</h3></div>
  <div><h3>2011</h3></div>
  <div><h3>2010</h3></div>
  <div><h3>2009</h3></div>
  <div><h3>2008</h3></div>
  <div><h3>2007</h3></div>
  <div><h3>2006</h3></div>
  <div><h3>2005</h3></div>
  <div><h3>2004</h3></div>
  <div><h3>2003</h3></div>
  <div><h3>2002</h3></div>
  <div><h3>2001</h3></div>
  <div><h3>2000</h3></div>
  <div><h3>1995</h3></div>
</div>

<div class="slider slider-nav">
  <div><h3>2015</h3></div>
  <div><h3>2014</h3></div>
  <div><h3>2013</h3></div>
  <div><h3>2012</h3></div>
  <div><h3>2011</h3></div>
  <div><h3>2010</h3></div>
  <div><h3>2009</h3></div>
  <div><h3>2008</h3></div>
  <div><h3>2007</h3></div>
  <div><h3>2006</h3></div>
  <div><h3>2005</h3></div>
  <div><h3>2004</h3></div>
  <div><h3>2003</h3></div>
  <div><h3>2002</h3></div>
  <div><h3>2001</h3></div>
  <div><h3>2000</h3></div>
  <div><h3>1995</h3></div>
</div>

<div class="slider slider-for">
  <div><h3>2015</h3></div>
  <div><h3>2014</h3></div>
  <div><h3>2013</h3></div>
  <div><h3>2012</h3></div>
  <div><h3>2011</h3></div>
  <div><h3>2010</h3></div>
  <div><h3>2009</h3></div>
  <div><h3>2008</h3></div>
  <div><h3>2007</h3></div>
  <div><h3>2006</h3></div>
  <div><h3>2005</h3></div>
  <div><h3>2004</h3></div>
  <div><h3>2003</h3></div>
  <div><h3>2002</h3></div>
  <div><h3>2001</h3></div>
  <div><h3>2000</h3></div>
  <div><h3>1995</h3></div>
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>

解决方案

It seems that the asNavFor option works as a normal CSS selector. You can list several classes separated by commas:

$('.slider-for').slick({
  asNavFor: '.slider-nav,.slider-x',
});
$('.slider-x').slick({
  asNavFor: '.slider-for,.slider-nav',
});
$('.slider-nav').slick({
  asNavFor: '.slider-for,.slider-x',
});

I've removed options that have default values.

Please check the result: https://jsfiddle.net/glebkema/b6c2ayeg/

$('.slider-for').slick({
  arrows: false,
  asNavFor: '.slider-nav,.slider-x',
});
$('.slider-x').slick({
  arrows: true,
  asNavFor: '.slider-for,.slider-nav',
});
$('.slider-nav').slick({
  arrows: true,
  asNavFor: '.slider-for,.slider-x',
  centerMode: true,
  centerPadding: '60px',
  dots: true,
  focusOnSelect: true,
  slidesToShow: 5,
});

@import url('//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css');
@import url('//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.css');

.slick-slide {
  background: #3a8999;
  color: white;
  padding: 40px 0;
  font-size: 30px;
  font-family: "Arial", "Helvetica";
  text-align: center;
}

.slick-arrow:before {
  color: black;
}

.slick-dots {
  bottom: -30px;
}

.slick-slide:nth-child(odd) {
  background: #e84a69;
}

.slider {
  margin: 0 30px;
}

<div class="slider slider-x">
  <div><h3>2015</h3></div>
  <div><h3>2014</h3></div>
  <div><h3>2013</h3></div>
  <div><h3>2012</h3></div>
  <div><h3>2011</h3></div>
  <div><h3>2010</h3></div>
  <div><h3>2009</h3></div>
  <div><h3>2008</h3></div>
  <div><h3>2007</h3></div>
  <div><h3>2006</h3></div>
  <div><h3>2005</h3></div>
  <div><h3>2004</h3></div>
  <div><h3>2003</h3></div>
  <div><h3>2002</h3></div>
  <div><h3>2001</h3></div>
  <div><h3>2000</h3></div>
  <div><h3>1995</h3></div>
</div>

<div class="slider slider-nav">
  <div><h3>2015</h3></div>
  <div><h3>2014</h3></div>
  <div><h3>2013</h3></div>
  <div><h3>2012</h3></div>
  <div><h3>2011</h3></div>
  <div><h3>2010</h3></div>
  <div><h3>2009</h3></div>
  <div><h3>2008</h3></div>
  <div><h3>2007</h3></div>
  <div><h3>2006</h3></div>
  <div><h3>2005</h3></div>
  <div><h3>2004</h3></div>
  <div><h3>2003</h3></div>
  <div><h3>2002</h3></div>
  <div><h3>2001</h3></div>
  <div><h3>2000</h3></div>
  <div><h3>1995</h3></div>
</div>

<div class="slider slider-for">
  <div><h3>2015</h3></div>
  <div><h3>2014</h3></div>
  <div><h3>2013</h3></div>
  <div><h3>2012</h3></div>
  <div><h3>2011</h3></div>
  <div><h3>2010</h3></div>
  <div><h3>2009</h3></div>
  <div><h3>2008</h3></div>
  <div><h3>2007</h3></div>
  <div><h3>2006</h3></div>
  <div><h3>2005</h3></div>
  <div><h3>2004</h3></div>
  <div><h3>2003</h3></div>
  <div><h3>2002</h3></div>
  <div><h3>2001</h3></div>
  <div><h3>2000</h3></div>
  <div><h3>1995</h3></div>
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>

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

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆