分享程序员开发的那些事...
更新时间：2022-09-15 15:35:14
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 记住啦：）
欢迎任何形式的转载，但请务必注明出处。