2015-03-02 69 views
0

我正試圖實現一個簡單的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 
}); 
+0

您的例子似乎沒有工作...的unslider庫沒有加載 – 2015-03-02 22:58:02

+0

@naman kalkhuria,請參閱更新的jsfiddle,感謝您的接觸 – AnchovyLegend 2015-03-02 23:01:42

回答

1

您的導航,但你必須添加的造型自己。

要關閉自動滾屏設置delayfalse

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

+1

正是我在找什麼,謝謝! :) – AnchovyLegend 2015-03-02 23:08:20