Question

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

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

＆＃13;

$('.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
	});

＆＃13;

.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;
}

＆＃13;

<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;

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

1 个答案: