插件描述：响应式jQuery的内容滑块插件bxslider
bxSlider特性
1.充分响应各种设备，适应各种屏幕；
2.支持多种滑动模式，水平、垂直以及淡入淡出效果；
3.支持图片、视频以及任意html内容；
4.支持触摸滑动；
5.支持Firefox，Chrome，Safari，iOS，Android，IE7+
如何使用bxSlider
1、首先是加载jQuery库，以及bxSlider插件文件和相关CSS文件，您可以从官方网站下载最新版本的bxSlider。
<link rel="stylesheet" type="text/css" href="jquery.bxslider.css"> <script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script> <script src="jquery.bxslider.min.js"></script>
2、准备滑动内容，我们创建一个ul.bxslider，然后在其子元素li中加入滑动内容，滑动内容可以是图片、视频以及任意html内容：
<ul class="bxslider"> <li><img src="images/pic1.jpg" /></li> <li><img src="images/pic2.jpg" /></li> <li><img src="images/pic3.jpg" /></li> </ul>
3、调用bxSlider插件，当页面内容加载完时调用bxSlider。
$(function(){
$('.bxslider').bxSlider();
});这样，一个超酷的内容滑动效果就实现了，查看演示demo，将浏览器窗口放大和缩小可以看到滑动内容会随着浏览器窗口自动调整大小。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 |
PREVIOUS:
NEXT:
相关插件-幻灯片和轮播图,滑块和旋转
讨论这个项目（31）回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约
暗裔剑魔 0
2020/5/16 13:34:46
-
从最后一张回到第一张，为何会闪烁一下
暗裔剑魔0
2020/5/16 13:40:01
-
你们看下演示里的，从最后一张切换到第一张会闪烁一下。我下载看了，只有限定宽度才不会闪烁，当宽度100%就会
wf45361027 0
2017/4/18 15:30:55
为什么左右的箭头不显示呢
我来自火星0
2017/4/19 20:09:11
我也是左右箭头步显示，你解决了吗
天涯咫尺0
2017/5/24 1:58:22
可能是图片加载路径的问题
恋念不舍1
2018/6/27 18:50:55
-
修改jquery.bxslider.css里面的图片路径为自己的图片文件路径,或者把包里的图片文件夹也搬过去
zj2086 0
2016/8/25 15:08:46
-
遇到个新问题啊，不知道能不能给解决一下，自己看了一天了，没看出来该设置哪里 当点过图片下面的圆点，图片就不会自动滚动了。。。想让它再次开始自动滚动怎么设置。谢谢
-3
2016/12/20 16:12:34
onSliderLoad: function() {
$(".bx-pager-item a").click(function() {
var thumbIndex = $('.bx-pager-item a').index(this);
slider.goToSlide(thumbIndex);
slider.startAuto();
});
$(".bx-controls-direction a").click(function() {
slider.goToNextSlide();
slider.startAuto();
})
}
研发部-宋晨0
2017/11/23 10:19:47
我引用这段代码后 显示slider is not defined 这个slider是什么
我说过要你快乐0
2018/9/27 14:50:32
-
我也遇上了 兄弟两年了
ricefoto 0
2016/7/20 22:07:48
-
自动播放怎么加？
西瓜0
2016/7/21 11:07:44
上面不是有人回答了吗？下面自动播放的auto:true
<script>
$(document).ready(function(){
$('.bxslider').bxSlider({
auto:true, //自动播放
})
});
</script>
喃喃_web 0
2016/7/1 15:07:27
-
初次打开或者刷新的时候 轮播图的图片会依次平铺下来 ，是什么原因？
jjjzzzxxx0
2017/2/10 14:10:11
-
问下这个问题解决了吗
😃
- 😀
- 😉
- 😥
- 😵
- 😫
- 😘
- 😡
- 👍
- 🌹
- 👏
- 🍺
- 🍉
- 🌙
- ⭐
- 💖
- 💔
😃
取消回复
- 😀
- 😉
- 😥
- 😵
- 😫
- 😘
- 😡
- 👍
- 🌹
- 👏
- 🍺
- 🍉
- 🌙
- ⭐
- 💖
- 💔
