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

Question

我正在尝试实现一个简单的反滑块 jquery插件实例，其中启用了nav按钮，并禁用了自动播放功能。我看了一下文档，下面的内容似乎很有用。但是，这些按钮永远不会出现，自动播放在默认情况下似乎是启用的。我很欣赏大家对此提出的任何建议。提前谢谢。

JS Fiddle：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>

​