我正在尝试实现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 :(得分: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>
&#13;