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

Question

我正在尝试实现 unslider jquery 插件的一个简单实例，启用导航按钮并禁用自动播放。我查看了文档，下面似乎应该可以解决问题。但是，按钮永远不会出现，并且默认情况下似乎启用了自动播放。我感谢任何关于为什么会这样的建议。提前致谢。

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>

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

Basic image slider plugin with nav buttons

javascript

css

jquery

slider