bxslider使用帮助

“bxSlider”就是一款响应式的幻灯片js插件

bxSlider特性

充分响应各种设备，适应各种屏幕；

支持多种滑动模式，水平、垂直以及淡入淡出效果；

支持图片、视频以及任意html内容；

支持触摸滑动；

支持Firefox，Chrome，Safari，iOS，Android，IE7+

bxSlider使用方法：

加载jQuery库，加载bxSlider插件文件和相关CSS文件；

    <!-- bxSlider CSS file -->
    <link href="jquery.bxslider.css" rel="stylesheet" />
    
    <!-- jQuery library -->
    <script src="jquery-3.1.1.min.js"></script>
    <!-- bxSlider Javascript file -->
    <script src="jquery.bxslider.js"></script>

创建一个幻灯片区块：

    <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/pic1.jpg" /></li>
      <li><img src="images/pic2.jpg" /></li>
    </ul>
    

加上bxSlider参数激活使用：

    <script>
        $(document).ready(function() {
            $('.bxslider').bxSlider({
                mode: 'horizontal',
                moveSlides: 1,
                slideMargin: 40,
                infiniteLoop: true,
                slideWidth: 660,
                minSlides: 3,
                maxSlides: 3,
                speed: 800,
            });
        });
    </script>
        

bxSlider下载地址：官方下载

bxSlider具体参数：