twitter-bootstrap jQuery Slick 轮播滑块同步不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26373003/
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
jQuery Slick carousel slider syncing not working
提问by filiplaw
I'm trying to make a carousel with logos as navigation for the main slider using Slick Carousel. I used Yeoman webapp generator to create a boilerplate with Bootstrap and Modernizr. Installed Slick.js with Bower.
我正在尝试使用 Slick Carousel 制作带有徽标的旋转木马作为主滑块的导航。我使用 Yeoman webapp 生成器创建了一个带有 Bootstrap 和 Modernizr 的样板。使用 Bower 安装 Slick.js。
I used the default Slick settings for slider syncing. The problem is Slick seems to ignore the centerMode as well as focusOnClick options in the navigation part. Right now it only works when clicking the navigation dots.
我使用默认的 Slick 设置进行滑块同步。问题是 Slick 似乎忽略了导航部分中的 centerMode 和 focusOnClick 选项。现在它仅在单击导航点时有效。
What I want it to do:
我想要它做什么：
- clicking on a logo should activate (display) the corresponding slide
- the currently active logo should take the center position
- 单击徽标应激活（显示）相应的幻灯片
- 当前活动的标志应位于中心位置
You can see how it should work hereunder ‘Slider Syncing' section.
你可以看到它是如何应该工作在这里下“滑块正在同步”部分。
I've made a codepen with jQuery, Bootstrap and Slick loaded: http://codepen.io/filiplaw/pen/ylhiB- you can see the problem there. Here's the code:
我已经用 jQuery、Bootstrap 和 Slick 加载了一个代码笔：http://codepen.io/filiplaw/pen/ylhiB - 你可以在那里看到问题。这是代码：
HTML:
HTML：
<div class="container">
<div class="slider-for">
<div>
<img class="img-responsive" src="http://placehold.it/960x540&text=1" alt="">
<h4>
Title
</h4>
<h6>
<a href="#">
link
</a>
</h6>
<p>
Description
</p>
</div>
<div>
<img class="img-responsive" src="http://placehold.it/960x540&text=2" alt="">
<h4>
Title
</h4>
<h6>
<a href="#">
link
</a>
</h6>
<p>
Description
</p>
</div>
<div>
<img class="img-responsive" src="http://placehold.it/960x540&text=3" alt="">
<h4>
Title
</h4>
<h6>
<a href="#">
link
</a>
</h6>
<p>
Description
</p>
</div>
<div>
<img class="img-responsive" src="http://placehold.it/960x540&text=4" alt="">
<h4>
Title
</h4>
<h6>
<a href="#">
link
</a>
</h6>
<p>
Description
</p>
</div>
<div>
<img class="img-responsive" src="http://placehold.it/960x540&text=5" alt="">
<h4>
Title
</h4>
<h6>
<a href="#">
link
</a>
</h6>
<p>
Description
</p>
</div>
</div>
<div class="slider-nav">
<div>
<img class="img-responsive" src="http://placehold.it/250x100&text=logo1" alt="">
</div>
<div>
<img class="img-responsive" src="http://placehold.it/250x100&text=logo2" alt="">
</div>
<div>
<img class="img-responsive" src="http://placehold.it/250x100&text=logo3" alt="">
</div>
<div>
<img class="img-responsive" src="http://placehold.it/250x100&text=logo4" alt="">
</div>
<div>
<img class="img-responsive" src="http://placehold.it/250x100&text=logo5" alt="">
</div>
</div>
</div>
JS:
JS：
$('.slider-for').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
asNavFor: '.slider-nav'
});
$('.slider-nav').slick({
slidesToShow: 3,
slidesToScroll: 1,
asNavFor: '.slider-for',
dots: true,
centerMode: true,
arrows: false,
focusOnSelect: true
});
CSS:
CSS：
.container {
margin-bottom: 5%;
margin-top: 5%;
}
.slider-for {
max-width: 960px;
margin-left: auto;
margin-right: auto;
margin-bottom: 10%;
}
回答by filiplaw
The issue is solved. Turns out I needed to add some simple CSS rules. You can see the answer on GitHub.
问题解决了。结果我需要添加一些简单的 CSS 规则。你可以在 GitHub 上看到答案。
The h1 content needs
h1内容需要
display: inline-block;
The slick-slide needs
光滑的幻灯片需要
text-align: center;
