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

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

您可能感兴趣的相关文章

 

 

效果演示      插件下载

 

使用方法:

  引入 jQuery 和 Unslider:

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

  编写 HTML 无序列表:

1
2
3
4
5
6
7
<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 美化外观:

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

  最后就是调用插件:

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

  

您可能感兴趣的相关文章

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

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

posted @   梦想天空(山边小溪)  阅读(30192)  评论(12编辑  收藏  举报
编辑推荐:
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
阅读排行:
· 周边上新:园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源!
· .NET周刊【3月第1期 2025-03-02】
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· [AI/GPT/综述] AI Agent的设计模式综述
历史上的今天:
2011-03-23 分享 35 套精美的 PSD 图标素材
点击右上角即可分享
微信分享提示