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

开发者社区> 秋天风景> 正文

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

简介:   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 记住啦:)
欢迎任何形式的转载,但请务必注明出处。

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

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
7577 0
开发笔记5 | 阿里云Eclipse插件安装与使用(视频演示)
快速体验 安装指南 阿里云开发者工具交流 钉钉群
955 0
PostgreSQL 11 相似图像搜索插件 imgsmlr 性能测试与优化 2 - 单机分区表 (dblink 异步调用并行) (4亿图像)
标签 PostgreSQL , imgsmlr , GiST , 图像特征值 , 小波转换 背景 续 《PostgreSQL 11 相似图像搜索插件 imgsmlr 性能测试 1 - 单机单表 (4亿图像)》 使用分区表+dblink异步接口并行调用。
862 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
9304 0
8款非常棒的响应式 jQuery 幻灯片插件推荐
这篇文章收集了8款优秀的响应式 jQuery 幻灯片插件,它们能够非常容易的集成到 Web 项目中。响应式(Responsive)设计的目标是要让产品界面能够响应用户的行为,根据不同终端设备自动调整尺寸,带给用户良好的使用体验。
964 0
响应式 Web 设计的 20 个有用的 jQuery 插件
响应式网页设计是Ethan Marcotte在去年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念可以说是是为移动互联网而生的! 本文介绍 20 个 jQuery 插件适合进行响应式 Web 网站设计。
624 0
PgSQL · 内核开发 · 如何管理你的 PostgreSQL 插件
一.背景 我们都知道 PostgreSQL 提供了丰富数据库内核编程的接口,允许开发者以插件的形式把功能融入数据库内核。 PostgreSQL 提供了一个插件管理模块,用于管理用户创建的插件。 本文给大家介绍 PostgreSQL 插件管理模块,帮助大家管理自己的插件。 二.PostgreSQL的插件内容 通常一个 PostgreSQL 内核插件包括下面的部分 1. 包含功能的逻辑的动
1313 0
响应式滑块动画插件
在线演示 本地下载
770 0
[Unity3d]场景管理插件-SceneManager
Unity3d中提供了场景Scene的概念,Scene就是一组相关联的游戏对象的一个集合,通常每个集合就是一个场景,但是也有可能只是一个场景的一部分! 场景中的游戏对象是任意的,可以是HUD的UI组件,场景地图,模型等等 Unity3d提供了一...
1137 0
+关注
秋天风景
既然选择了远方,便只顾风雨兼程。
2394
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载