我正在尝试使用 Slick Carousel 制作一个带有 Logo 的轮播作为主 slider 的导航。我使用 Yeoman webapp 生成器使用 Bootstrap 和 Modernizr 创建样板。使用 Bower 安装了 Slick.js。
我使用默认的 Slick 设置进行 slider 同步。问题是 Slick 似乎忽略了导航部分中的 centerMode 和 focusOnClick 选项。现在它 仅在单击导航点时有效。
我想要它做什么:
- 点击 Logo 应激活(显示)相应的幻灯片
- 当前事件 Logo 应位于中心位置
您可以看到它应该如何工作here在“ slider 同步”部分下。
我用 jQuery、Bootstrap 和 Slick 加载了一个 codepen:http://codepen.io/filiplaw/pen/ylhiB - 你可以看到那里的问题。代码如下:
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:
$('.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:
.container {
margin-bottom: 5%;
margin-top: 5%;
}
.slider-for {
max-width: 960px;
margin-left: auto;
margin-right: auto;
margin-bottom: 10%;
}
最佳答案
问题已解决。结果我需要添加一些简单的 CSS 规则。 您可以看到the answer on GitHub .
h1内容需要
display: inline-block;
光滑的幻灯片需要
text-align: center;
关于jQuery Slick 轮播 slider 同步不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26373003/