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	内容切换速度，数字，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

 

 

主页：http://bxslider.com/

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

 

ikeepstudying.com

下载：bxslider-4-master