官方网站: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,又看不习惯英文;参数部分挑选了大部分常用的;如有不足之处,请留言讨论;