jQuery响应式内容滑动插件bxSlider

2017-02-254,971 人已阅来源:网络

bxSlider 是一款免费的 jQuery Slider 的插件,它可以实现 内容和图片幻灯片滚动效果,支持响应式,桌面和手机等各种设备都能完美适应。

bxSlider特性

  • 完全响应 - 将适应任何设备
  • 水平,垂直和渐变模式
  • 幻灯片可以包含图片,视频或HTML内容
  • 内置高级触摸/滑动支持
  • 对幻灯片动画使用CSS转换(本机硬件加速!)
  • 完全回调API和公共方法
  • 插件体积非常小,但是包含完整的主题,,实现简单
  • 浏览器支持:Firefox,Chrome,Safari,iOS,Android,IE7 +

如何使用 bxSlider

引入核心文件

首先是加载jQuery库,以及bxSlider插件文件和相关CSS文件,您可以从官方网站下载最新版本的bxSlider

<script src="/js/jquery.min.js"></script>
<script src="/js/jquery.bxslider.min.js"></script>
<link href="/lib/jquery.bxslider.css" rel="stylesheet" />

创建HTML标记

创建一个<ul class="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>
<li><img src="/images/pic4.jpg" /></li>
</ul>

调用bxSlider

调用bxSlider插件,当页面内容加载完时调用bxSlider。

$(document).ready(function(){
$('.bxslider').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

更多参数及资料请参考官网:bxSlider官网   bxSlider Github