帶導航按鈕的基本圖像滑塊插件

Question

我正在嘗試使用啟用導航按鈕和禁用自動播放的unslider jquery插件來實現一個簡單實例。 我仔細閱讀了文檔，以下內容似乎可以解決問題。 但是，這些按鈕永遠不會出現，並且默認情況下似乎啟用了自動播放。 我感謝任何關於為什么這樣做的建議。 提前致謝。

JS小提琴： http : //jsfiddle.net/0mgmz48h/1/

我嘗試過的Javascript：

$('.banner').unslider({
    speed: 500,               //  The speed to animate each slide (in milliseconds)
    delay: 3000,              //  The delay between slide animations (in milliseconds)
    keys: false,               //  Enable keyboard (left, right) arrow shortcuts
    dots: true,               //  Display dot navigation
    fluid: false              //  Support responsive design. May break non-responsive designs
});

Answer 1

正在生成導航，但是您必須自己添加樣式。

要關閉自動滾動，請將delay設置為false

 $('.banner').unslider({ speed: 500, // The speed to animate each slide (in milliseconds) delay: false, // The delay between slide animations (in milliseconds) keys: false, // Enable keyboard (left, right) arrow shortcuts dots: true, // Display dot navigation fluid: false // Support responsive design. May break non-responsive designs }); 

 .banner { position:relative; overflow:auto; width:450px; height:350px; border:1px solid orange; } .banner li { list-style:none; } .banner ul li { float:left; } .banner li img { width:300px; margin:0 auto; } /* NAV DOTS STYLES */ .banner .dots { position:absolute; left:0; right:0; bottom:20px; } .banner .dots li { display:inline-block; width:10px; height:10px; text-indent:-999em; border:2px solid #000; border-radius:6px; cursor:pointer; opacity:.4; -webkit-transition:background .5s, opacity .5s; -moz-transition:background .5s, opacity .5s; transition:background .5s, opacity .5s; margin:0 4px; } .banner .dots li.active { background:#000; opacity:1; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="http://unslider.com/unslider.min.js"></script> <div class="banner"> <ul> <li>One <img src="http://www.cats.org.uk/uploads/images/pages/photo_latest14.jpg" /> </li> <li>Two <img src="http://www.cats.org.uk/uploads/images/pages/photo_latest14.jpg" /> </li> <li>Three <img src="http://www.cats.org.uk/uploads/images/pages/photo_latest14.jpg" /> </li> </ul> </div>