光滑滑块同步多个滑块 - 3

时间：2017-01-24 03:28:14

标签： javascript jquery slider slick.js slick-slider

我正在使用光滑的Slider Syncing和3个滑块。使用2个滑块可以正常工作，但是当我尝试使用3个滑块时，只有2个滑块工作。

示例»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>

1 个答案:

答案 0 :(得分：3)

似乎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/

＆＃13;
＆＃13; 
$('.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,
});
＆＃13; 
@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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题