Unslider – 轻量的响应式 jQuery 内容滑块插件-阿里云开发者社区

Unslider – 轻量的响应式 jQuery 内容滑块插件

2013-03-23 1050

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

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

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

您可能感兴趣的相关文章

效果演示插件下载

使用方法：

　　引入 jQuery 和 Unslider：

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

　　编写 HTML 无序列表：

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

　　使用 CSS 美化外观：

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

　　最后就是调用插件：

$('.banner').unslider({
	speed: 500,               //  滚动速度
	delay: 3000,              //  动画延迟
	complete: function() {},  //  动画完成的回调函数
	keys: true,               //  启动键盘导航
	dots: true,               //  显示点导航
	fluid: false              //  支持响应式设计
});

您可能感兴趣的相关文章

本文链接：Unslider – 轻量的响应式 jQuery 内容滑块插件

编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源

作者：山边小溪
主站：yyyweb.com 记住啦：）
欢迎任何形式的转载，但请务必注明出处。