实现Slick Carousel的问题

本文关键字：问题 Carousel Slick 实现 | 更新日期: 2023-09-27 18:25:41

新手在这里寻求帮助。我在我的网站上实现Slick旋转木马时遇到了问题。我想使用位于的"Slider Syncing"http://kenwheeler.github.io/slick/

请在此处查看我的代码：http://jsfiddle.net/g1xd6vtx/

我正在构建的网站是一个在Visual Studio 2012中构建的C#MVC4项目。

示例HTML:

<div class="slider slider-for">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>


<div class="slider slider-nav">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>

CSS（我已经把它放在标题部分）：

<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>

Javascript（我已经把它放在脚本部分）：

$('.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,
    focusOnSelect: true
 });

感谢您的帮助！：）

实现Slick Carousel的问题

有点晚了，但这可能会帮助其他人：我注意到你必须有一个块或内联块元素在滑块导航DIV.在这种情况下，我添加了一个H1。然后将其样式设置为覆盖父DIV，然后添加文本align：center；到父DIV.

CSS

.slider-nav h1{
    display:inline-block;
    width:100%;
    height:80px;
}
.slider-nav .slick-slide{
    height:80px;
    color:#fff;
    background:green;
    cursor:pointer;
    text-align:center;
    margin:0 10px;
}

HTML

<div class="slider-nav">
    <div><h1>1</h1></div>
    <div><h1>2</h1></div>
    <div><h1>3</h1></div>
    <div><h1>4</h1></div>
    <div><h1>5</h1></div>
</div>

演示：http://jsfiddle.net/g1xd6vtx/2/

相关文章：