Unslider 轻量级响应式 jQuery 幻灯片插件

Question

Unslider 是一款非常轻量的 jQuery 插件（压缩后不到3KB），能够用于任何 HTML 内容的滑动。可以响应容器的大小变化，自动排布不用大小的滑块。可以通过整合 jQuery.event.swipe 来让其支持触屏设备的滑动功能。

特点

跨浏览器

Unslider 已经在所有最新的浏览器上测试过了，并且对那些老旧的浏览器也能很出色的降级处理。

支持键盘导航

如果需要，可以加入键盘方向键导航。试一试左右方向键吧！

自动调整高度

并不是每个幻灯片都很规范，Unslider能够自动调整高度。

Yep，他还支持响应式布局

如今哪个网站还不支持响应式布局就已经非常OUT了。Unslider帮你轻松搞定！

如何使用Unslider

引入 jQuery 和 Unslider

To use Unslider, you’ll need to make sure both the Unslider and jQuery scripts are included. If you’ve already got jQuery (you can test by opening your JavaScript console and typing !!window.jQuery — if it says true, you have jQuery), you don’t need to add the first line.

<script src="//code.jquery.com/jquery-latest.min.js"></script>
<script src="//unslider.com/unslider.js"></script>

准备 HTML 代码

Unslider doesn’t need any really awkward markup. In fact, all you need is a div and an unordered list. An example of some Unslider-friendly HTML is on the right.

You can add as many slides as you want: the example on the right just has three for the sake of brevity, but Unslider won’t work properly with one slide (but then it’s just a box).

<div class="banner">
  <ul>
    <li>This is a slide.</li>
    <li>This is another slide.</li>
    <li>This is a final slide.</li>
  </ul>
</div>

Make it pretty

You can change, add, and remove as much CSS per slide as you want, but there is a barebones style required by Unslider. It’s on the right (change the class name where .banner is the name of your slider).

.banner { position: relative; overflow: auto; }
.banner li { list-style: none; }
.banner ul li { float: left; }

Plug it all together

We’ve been through so much together, and I’m pleased to say the finish line is near. Our journey is almost over, just one more thing left to do. The JavaScript is on the right (make sure to put it in a script tag, and change .banner to whatever your slider’s element is).

参数

Although it’s lightweight, Unslider comes with a range of options to customise your slider. Here’s the default options provided. You can add, remove, or completely skip out the options object. It’s up to you.

$('.banner').unslider({
	speed: 500,         //  The speed to animate each slide (in milliseconds)
	delay: 3000,        //  The delay between slide animations (in milliseconds)
	complete: function() {},  //  A function that gets called after every slide animation
	keys: true,         //  Enable keyboard (left, right) arrow shortcuts
	dots: true,         //  Display dot navigation
	fluid: false        //  Support responsive design. May break non-responsive designs
});

支持触摸屏

If you want to add mobile/touch/swipe/whatever support to Unslider, you’ll need to include the jQuery.event.swipe plugin, then it’ll work out the box. Easy!

添加向前(previous)/向后（next）链接

A feature that’s often requested in Unslider, but isn’t included in-the-box, is previous/next links. Luckily, they’re easy enough to add with a little script, which utilises Unslider’s methods.

<!-- The HTML -->
<a href="#" class="unslider-arrow prev">Previous slide</a>
<a href="#" class="unslider-arrow next">Next slide</a>

<!-- And the JavaScript -->
<script>
  var unslider = $('.banner').unslider();

  $('.unslider-arrow').click(function() {
    var fn = this.className.split(' ')[1];

    //  Either do unslider.data('unslider').next() or .prev() depending on the className
    unslider.data('unslider')[fn]();
  });
</script>

存取Unslider的属性

Using jQuery’s wonderful data method, you can access and manually override any methods. Here’s a list of what you can do:

var slidey = $('.banner').unslider(),
  data = slidey.data('unslider');

//  Start Unslider
data.start();

//  Pause Unslider
data.stop();

//  Move to a slide index, with optional callback
data.move(2, function() {});
//  data.move(0);

//  Manually enable keyboard shortcuts
data.keys();

//  Move to the next slide (or the first slide if there isn't one)
data.next();

//  Move to the previous slide (or the last slide if there isn't one)
data.prev();

//  Append the navigation dots manually
data.dots();

https://github.com/hudsonperalta/Unslider