实施滑动轮播的问题

Question

新手在这里寻找一些帮助。我在我的网站上实施Slick轮播时遇到问题。我想用“滑动同步”。在http://kenwheeler.github.io/slick/

发现请看看我的代码在这里：http://jsfiddle.net/g1xd6vtx/

我建立这个网站是建立在Visual Studio中的C＃.NET MVC4项目2012

样本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/