bxslider - 一款功能齐全、支持响应式的 jQuery内容滑块
  • 分享到微信朋友圈
    X

关于bxslider

bxslider是一款非常流行的图片轮播插件，它具有许多强大的功能和灵活的参数设置，可以满足不同用户的需求。

为什么要使用bxslider

  1. 完全响应——可适应任何设备

  2. 水平、垂直和淡入淡出模式

  3. 幻灯片可以包含图像、视频或 HTML 内容

  4. 完整的回调 API 和公共方法

  5. 文件大小小，主题齐全，易于实现

  6. 浏览器支持：Firefox、Chrome、Safari、iOS、Android、IE7+

  7. 灵活的参数设置

欲了解完整文档、大量示例以及精彩内容，请访问：http://bxslider.com

详细Demo：http://www.bxslider.com/examples

如何使用bxSlider

步骤1：调用所需文件

<!-- jQuery library (served from Google) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/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" />

CDN

<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.17/jquery.bxslider.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.17/jquery.bxslider.min.css"
    rel="stylesheet" />

步骤2：创建 HTML 标记

幻灯片可以包含图像、视频或任何其他 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>

步骤3：调用bxSlider

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

参数说明

  • mode:'horizontal', //设置滑动模式，'horizontal':水平, 'vertical':垂直, 'fade':淡入淡出

  • infiniteLoop:true, //true,false 是否循环滑动，如果设置为true时，则到最后滑动位置时会切换到初始位置

  • hideControlOnEnd:false, //true,false 如果设置true,将会再最后一个幻灯片隐藏"next"，在最前面的幻灯片银牌"prev"

  • controls:true, //true,false 是否显示“previous”和“next”按钮

  • speed:500, // 速度，单位为毫秒

  • easing:'swing', //图片切换动画效果,需要引用 jquery.easing.1.3.js

  • pager:true, //true 是否显示轮播图下方的小圆点。默认值为true。

  • pagerSelector:null, //用于填充分页器的元素。默认情况下，分页器附加到 bx-viewport

  • pagerType:'full', //如果设置full，将显示1,2,3.。。。，如果设置short，将显示1/4

  • pagerLocation:'bottom', //页面的位置

  • pagerShortSeparator:'/', //页面分隔符

  • pagerActiveClass:'pager-active', //当前页码的className

  • nextText:'next', //下一页的文字

  • nextImage:'', //可以设置下一页为图片

  • nextSelector:'null', //用于填充“下一步”控件的元素 比如:'#next'

  • prevText:'prev', //上一页的文字

  • prevImage:'', //上一页的图片

  • prevSelector:null, //用于填充“上一个”控件的元素 比如:'#prev'

  • caption:false, //true,false - 是否显示图片的标题，读取图片的title属性的内容

  • auto:false, //true,false 幻灯片自动滚动

  • autoDirection:'next', //true,false 自动滚动的顺序

  • autoControls:false,//true,false - 自动滚动的控制键

  • autoControlsSelector:null,//用于填充自动控件的元素 比如:'#auto-controls'

  • autoStart:true,//true,false - 自动启动 如果true在加载时开始播放。如果false，则幻灯片将在单击“开始”控件时开始播放

  • autoHover:false,//true,false - 设置鼠标mouseover将会使自动滚动暂停

  • autoDelay:0, //integer - 自动延迟 （以毫秒为单位）自动转换开始前应等待的时间

  • pause:3000, //integer - 每次自动转换之间的过渡时间（以毫秒为单位）

  • startText:'start', //string - 开始按钮的文字

  • startImage:'', //string - 开始按钮的图片

  • stopText:'stop', //string - 停止按钮的文本

  • stopImage:'', //string - 停止按钮的图片

  • wrapperClass:'bx-wrapper', //string - 默认的 bxSlider 样式

  • startingSlide:0,//integer - 放映将从指定幻灯片开始，注意：幻灯片从零开始！

  • displaySlideQty:1, //integer - 一次显示的幻灯片数量

  • moveSlideQty:1,//integer - 一次移动的幻灯片数量

  • randomStart:false, //true,false - 如果为 true， 随机显示幻灯片