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

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