jquery响应式内容滑动插件bxSlider

为什么要使用bxSslider jquery插件呢

  1. 完美响应式设计,适应任何设备。
  2. 可以包含图像,视频或HTML内容。
  3. 先进的触摸响应设计,极好的交互体验。
  4. 使用CSS动画,更流畅便省资源,加硬件加速
  5. 丰富的API和公共方法,方便使用
  6. 小文件,多主题,简单易用
  7. 兼容主流浏览器:火狐,Chrome,Safari浏览器,IOS,Android的,IE7 +
  8. 丰定罪的配置选项

 

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内容切换速度,数字,ms500
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自动滑动时停留时间,数字,ms4000
autoHover当鼠标滑向滑动内容上时,是否暂停滑动false

主页:http://bxslider.com/

项目地址:https://github.com/stevenwanderski/bxslider-4

ikeepstudying.com

下载:bxslider-4-master

相关推荐