Unslider 是一个超简单的 jQuery 幻灯片插件,尽管很小,但它非常灵活和可以扩展:你可以通过选项/设置,方法或回调事件改变任何东西。

用法

引入文件

</body> 标签之前添加对 jQuery 和 Unslider 的引用,确保 jQuery 是第一个被载入!如果没有,你会得到一个错误。

<!-- There'll be a load of other stuff here -->
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="/path/to/unslider.js"></script> <!-- but with the right path! -->
HTML

Unslider 使用一个 HTML 元素来包裹所有内容,并将所有的幻灯片作为无序列表。
你可以在每个幻灯片中放置任何您想要的 HTML 。

<div class="my-slider">
	<ul>
		<li>My slide</li>
		<li>Another slide</li>
		<li>My last slide</li>
	</ul>
</div>
CSS

为了正确显示,Unslider 需要应用一些样式。你可以通过链接到 dist/css/unslider.css 文件轻松添加它们。 如果你想要圆点样式,可以链接 dist/ css/unslider-dots.css 文件。
注意默认情况下,圆点样式的颜色为白色。

<link rel="stylesheet" href="/path/to/unslider/dist/css/unslider.css">
JS

当我们添加了一个带有 my-slider 类的滑块的 HTML ,我们可以使用 $('.my-slider') 来定位它。

jQuery(document).ready(function($) {
			$('.my-slider').unslider();
		});

你可以添加任意数量的滑块,并使用任何方法或选项来调整滑块。