bxSlider-响应式jquery内容滑动插件

官方网站:http://bxslider.com/

下载链接:http://bxslider.com/lib/jquery.bxslider.zip

演示网址:http://bxslider.com/examples

 

一、为什么应该用这个slider?

1、完全响应式设计-适应于任何设备;

2、支持水平、垂直、渐消模式;

3、其中能包含图片、视频或HTML内容;

4、支持内置的先进触摸、刷屏;

5、使用CSS渐变实现滑动动画(本机硬件加速);

6、全面地回调API和公共方法;

7、文件小,完全主题化,实施起来简单;

8、支持浏览器:Firefox、Chrome、Safari、iOS、Andriod、IE7+;

9、大量的配置选项参数;

 

二、怎样安装?

第一步:链接必要的文件(jquery及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" />

第二步:需要对应以下HTML标签( <ul class=”bxslider”> 包含一些 <li> 每个 li 代表一个滑动单位 )

<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>

第三步:调用bxslider

$(document).ready(function(){
  $('.bxslider').bxSlider();
});

 

三、配置选项参数

第一部分、通用

1、mode(滑动类型)

默认:’horizontal’

可选:’horizontal’, ‘vertical’, ‘fade’

2、speed(滑动速度,单位ms)

默认:500

可选:任意数字

3、slideMargin(滑块之间的外间距)

默认:0

可选:任意数字

4、startSlide(从哪个下标开始滑动 [下标基于0计数] )

默认:0

可选:任意数字

5、randomStart(从随机一个滑块开始滑动)

默认:false

可选:true, false

6、slideSelector(所选元素将作为一个滑块参与滑动;默认值为空,表示当前滑动容器的直接子元素都作为滑块参与滑动)

默认:”

可选:任意jquery选择器,例如:’div.slide’

7、infiniteLoop(是否循环)

默认:true

可选:true, false

8、hideControlOnEnd(滑动到最后时,“下一个”按钮是否隐藏)

默认:false

可选:true, false

备注:要想隐藏,须设置 infiniteLoop 为false和hideControlOnEnd为true

9、tickerHover(鼠标放置是否停止滑动 [如果使用CSS transitions ,这个函数不起作用] )

默认:false

可选:true, false

10、adaptiveHeight(基于每个滑块的高度动态调整容器的高度)

默认:false

可选:true, false

11、adaptiveHeightSpeed(滑块高度渐变,单位ms [只有当adaptiveHeight为true时起作用] )

默认:500

可选:任意数字

12、video(如果有视频,设置这个参数为true,同时调用文件 plugins/jquery.fitvids.js )

默认:false

可选:true, false

13、useCSS(如果true,将用 CSS transitions;如果false,将用jquery animate())

默认:true

可选:true, false

14、preloadImages(如果true,预加载所有图片,如果false,预加载可视的部分图片)

默认:visible

可选:all, visible

15、touchEnabled(是否允许触摸刷屏)

默认:true

可选:true, false

16、swipeThreshold(为了执行一个slide渐变需要突出的像素数量 [只当touchEnabled为true时起作用] )

默认:50

可选:任意数字

17、oneToOneTouch(如果true,刷屏时无淡入淡出)

默认:true

可选:true, false

18、preventDefaultSwipeX(如果true,将不支持横向刷屏)

默认:true

可选:true, false

19、preventDefaultSwipeY(如果true,将不支持纵向刷屏)

默认:false

可选:true, false

 

第二部分:Pager

1、pager(如果true,一个pager将被添加)

默认:true

可选:true, false

2、pagerType(如果full,将为每个滑块生成一个链接;如果short,x/y,例如1/5)

默认:full

可选:full, short

3、pagerShortSeparator(分页链接下标的间隔)

默认:’/’

可选:任意字符

 

第三部分:Controls

1、controls(是否添加“上一个”、“下一个”按钮)

默认:true

可选:true, false

2、nextText(“下一个”按钮上面的文字)

默认:’Next’

可选:任意字符

3、prevText(“上一个”按钮上面的文字)

默认:’Prev’

可选:任意字符

4、autoControls(是否添加“开始停止”按钮)

默认:true

可选:true, false

5、startText(“开始”按钮上面的文字)

默认:’Start’

可选:任意字符

6、stopText(“停止”按钮上面的文字)

默认:’Stop’

可选:任意字符

 

第四部分:Auto

1、auto(是否自动渐变)

默认:false

可选:true, false

2、pause(每两个自动渐变之间的时间间隔)

默认:4000

可选:任意整数

3、autoStart(是加载时还是点击start按钮时开始)

默认:true

可选:true, false

4、autoDirection(自动滑动的方向)

默认:’next’

可选:’next’, ‘prev’

5、autoHover(鼠标放置是否暂停)

默认:false

可选:true, false

6、autoDelay(自动延时)

默认:0

可选:任意整数

 

第五部分:Carousel

1、minSlides(如果滑块数量比此值小,将按照从大到小排列)

默认:1

可选:任意整数

2、maxSlides(如果滑块数量比此值大,将按照从小到大排列)

默认:1

可选:任意整数

3、moveSlides(每次移动的滑块数量;如果为0,将默认为所有可视的滑块数量)

默认:0

可选:任意整数

4、slideWidth(每个滑块的宽度,水平滑动必须有)

默认:0

可选:任意整数

 

备注:本翻译基于bxslider官方网站;源于群里有许多前端朋友提及不知道怎么用bxslider,又看不习惯英文;参数部分挑选了大部分常用的;如有不足之处,请留言讨论;

版权所有©转载必须以链接形式注明作者和原始出处

发表评论

电子邮件地址不会被公开。 必填项已用*标注