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

Basic image slider plugin with nav buttons

本文关键字：图像 插件 导航 按钮      更新时间：2023-09-26

我正在尝试实现一个简单的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
});

您的导航正在生成中，但您必须自己添加样式。

要关闭自动滚动，请将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>

相关文章：