带有导航按钮的基本图像滑块插件

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({ 
 
\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>