当前位置:  开发笔记 > 编程语言 > 正文

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

如何解决《光滑的滑块同步多个滑块-3》经验,为你挑选了1个好方法。



1> Gleb Kemarsk..:

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({
  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;
}

2015

2014

2013

2012

2011

2010

2009

2008

2007

2006

2005

2004

2003

2002

2001

2000

1995

2015

2014

2013

2012

2011

2010

2009

2008

2007

2006

2005

2004

2003

2002

2001

2000

1995

2015

2014

2013

2012

2011

2010

2009

2008

2007

2006

2005

2004

2003

2002

2001

2000

1995

推荐阅读
虎仔球妈_459
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有