Question

新手在这里寻求帮助。我在网站上实施Slick轮播时遇到了麻烦。我想使用＆＃34; Slider Syncing＆＃34;发现于http://kenwheeler.github.io/slick/

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

我构建的网站是在Visual Studio 2012中构建的C＃.NET 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
 });

感谢您的帮助！：）

Answer 1

有点晚了，但这可能对其他人有所帮助：我注意到你必须在.slider-nav DIV中有一个块或内联块元素。在这种情况下，我添加了一个H1。然后设置它以覆盖父DIV，然后添加text-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/

实施Slick Carousel的问题

1 个答案: