响应式 jQuery Slider 插件: bxSlider
2014-05-03 20:27
741 查看
bxSlider 是一款免费的
jQuery Slider 的插件,它可以实现 内容和图片幻灯片滚动效果,支持响应式,桌面和手机等各种设备都能完美适应。
完全响应式:支持所有设备。
支持水平,垂直和淡入淡出等模式。
支持图片,视频和 HTML 内容等幻灯片。
内置支持触摸和滑动等高级操作。
使用 CSS transitions 来实现幻灯片动画(原生硬件加速)。
完整的回调 API 和接口。
插件体积非常小,但是包含完整的主题,非常容易集成。
支持 Firefox, Chrome, Safari, iOS, Android, IE7+ 等几乎所有的浏览器。
非常详细的功能配置选项。
在介绍 bxSlider 使用之前,先看下 bxSlider 演示(RSS 用户需要返回原网站查看):
1. 首先加载 jQuery JS 库和下载并加载 bxSlider 的 JS 和 CSS 库:
2. 创建一个对应的 HTML 代码:
3. 调用 bxSlider:
当然 bxSlider 还有许多设置参数,你可以根据你自己的项目需求进行配置,详细请查看 bxSlider 的 Options 页面。
下载:bxSlider。
演示:jQuery slider 插件: bxSlider
作者:Denis
原文链接:响应式 jQuery Slider 插件: bxSlider
© 我爱水煮鱼,转载请留下原文链接。
jQuery Slider 的插件,它可以实现 内容和图片幻灯片滚动效果,支持响应式,桌面和手机等各种设备都能完美适应。
bxSlider 详细功能
完全响应式:支持所有设备。支持水平,垂直和淡入淡出等模式。
支持图片,视频和 HTML 内容等幻灯片。
内置支持触摸和滑动等高级操作。
使用 CSS transitions 来实现幻灯片动画(原生硬件加速)。
完整的回调 API 和接口。
插件体积非常小,但是包含完整的主题,非常容易集成。
支持 Firefox, Chrome, Safari, iOS, Android, IE7+ 等几乎所有的浏览器。
非常详细的功能配置选项。
使用 bxSlider
在介绍 bxSlider 使用之前,先看下 bxSlider 演示(RSS 用户需要返回原网站查看):1. 首先加载 jQuery JS 库和下载并加载 bxSlider 的 JS 和 CSS 库:
<!-- jQuery library (served from Google) --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <!-- bxSlider Javascript file --> <script src="/js/jquery.bxslider.min.js"></script> <!-- bxSlider CSS file --> <link href="/lib/jquery.bxslider.css" rel="stylesheet" />
2. 创建一个对应的 HTML 代码:
<ul class="bxslider"> <li><img src="/images/pic1.jpg" /></li> <li><img src="/images/pic2.jpg" /></li> <li><img src="/images/pic3.jpg" /></li> <li><img src="/images/pic4.jpg" /></li> </ul>
3. 调用 bxSlider:
$(document).ready(function(){ $('.bxslider').bxSlider(); });
当然 bxSlider 还有许多设置参数,你可以根据你自己的项目需求进行配置,详细请查看 bxSlider 的 Options 页面。
下载:bxSlider。
演示:jQuery slider 插件: bxSlider
作者:Denis
原文链接:响应式 jQuery Slider 插件: bxSlider
© 我爱水煮鱼,转载请留下原文链接。
相关文章推荐
- 轻量级触摸响应式滑块插件JQuery lightSlider
- bxSlider——焦点幻灯响应式jQuery插件
- Flexslider - 响应式的 jQuery 内容滚动插件
- 响应式内容滑动插件jQuery.bxSlider
- jQuery插件bxSlider实现响应式焦点图
- jQuery响应式幻灯片插件jquery.glide.js(支持触摸&轻量级)
- 使用JQuery插件Pinto 和Lightbox 制作带网格布局的响应式(Responsible)
- 超棒的jQuery响应式图片处理插件:jQuery picture
- 25 个响应式的 jQuery 导航菜单插件
- 一个强大专业的响应式jQuery幻灯效果插件:Royal Slider
- jquery插件nivo-slider实现幻灯效果
- 12款响应式的 jQuery 旋转木马(传送带)插件
- 幻灯片插件-jquery.sliderPro.min.js
- 基于JQuery的轮播图插件nivo-slider使用教程
- jQuery 插件:用于移动项目的响应式音频播放器----Osvaldas Valutis
- Html5添加自动排列图片的jquery响应式图片排列插件教程
- 基于jQuery的响应式Tab选项卡插件easyResponsiveTabs.js
- MBB类似jquery.bxslider插件轮播效果
- 50个令人惊奇的jQuery插件(对话框和表单篇)及免费的响应式bootstrap管理员后台界面主题 - Charisma
- 超棒的响应式jQuery网格布局插件 - grid-a licious