jquery响应式内容滑动插件bxSlider
为什么要使用bxSslider jquery插件呢
- 完美响应式设计,适应任何设备。
- 可以包含图像,视频或HTML内容。
- 先进的触摸响应设计,极好的交互体验。
- 使用CSS动画,更流畅便省资源,加硬件加速
- 丰富的API和公共方法,方便使用
- 小文件,多主题,简单易用
- 兼容主流浏览器:火狐,Chrome,Safari浏览器,IOS,Android的,IE7 +
- 丰定罪的配置选项
How to install
Step 1: Link required files
First and most important, the jQuery library needs to be included (no need to download - link directly from Google). Next, download the package from this site and link the bxSlider CSS file (for the theme) and the bxSlider Javascript file.
<!-- 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" />
Step 2: Create HTML markup
Create a <ul class="bxslider">
element, with a <li>
for each slide. Slides can contain images, video, or any other HTML content!
<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>
Step 3: Call the bxSlider
Call .bxslider() on <ul class="bxslider">
. Note that the call must be made inside of a $(document).ready() call, or the plugin will not work!
$(document).ready(function(){ $('.bxslider').bxSlider(); });
bxSlider提 供了丰富的配置选项,可以设置不同参数满足不同的需求,具体的效果请您自己动手体验,本站不一一举例了。以下是参数列表
参数 | 描述 | 默认值 |
mode | 设置滑动模式,'horizontal':水平, 'vertical':垂直, 'fade':淡入淡出 | horizontal |
speed | 内容切换速度,数字,ms | 500 |
startSlide | 初始滑动位置,数字 | 0 |
randomStart | 随机初始滑动位置 | true |
infiniteLoop | 循环滑动,如果设置为true时,则到最后滑动位置时会切换到初始位置 | true |
easing | 切换动画扩展,可以借助jQuery Easing 动画效果扩展设置不同的切换动画效果 | null |
captions | 设置显示图片标题,当滑动内容为图片时并设置属性title,可以显示图片标题 | false |
video | 支持视频,当设置为true时,需要jquery.fitvids.js支持 | false |
pager | 设置是否显示分页,设置为true时,会在滑动内容下方显示分页图标 | true |
controls | 设置是否显示上一副和下一幅按钮 | true |
auto | 设置是否自动滑动 | false |
pause | 自动滑动时停留时间,数字,ms | 4000 |
autoHover | 当鼠标滑向滑动内容上时,是否暂停滑动 | false |