實施滑動輪播的問題

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/