swiper插件的使用demo

Posted 2020-09-03

老习惯，废话不多说，直接上代码

1.PC端，swiper2，滑动效果

先要引入idangerous.swiper2.7.6.css和idangerous.swiper2.7.6.js（需要先引入jquery类库）；

(1)html文件内容：

<!-- 如果需要在图片可视区的周围添加一些样式，需要在外层套上一层<div> -->
<div class="mywrapper">
     <!-- 图片可视区 -->
<div class="swiper-container">
      <!-- 包裹图片的父级元素 -->
      <div class="swiper-wrapper">
           <div class="swiper-slide"><img src="../img/slide1.png" alt=""></div>
           <div class="swiper-slide"><img src="../img/slide2.png" alt=""></div>
           <div class="swiper-slide"><img src="../img/slide3.png" alt=""></div>
      </div>

      <!-- 前进和后退按钮 -->
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
</div>
</div>

<!-- 放在外部的分页器容器 -->
<div class="nav">
     <!-- 图片对应的分页器 -->
     <div class="swiper-pagination"></div>
</div>   

<!-- 文本容器 -->
<ul class="text">
    <li class="active">轻松查看所有交易记录，对账简洁方便</li>
    <li>支持被扫支付，更快更方便，收款从此无忧</li>
    <li>被扫交易完成结果自动弹出，自动退出，减少更多操作</li>
</ul>

(2)less文件内容：

.swiper-container-wrapper {
    /* 设置图片可视区的外层<div>的样式 */
    width: 906px;
    height: 570px;
    margin: 50px auto;
    paddding-top: 20px;
    box-sizing: border-box;
    .bgImg(‘/swiper_container.png‘);
    .bgSize(100, 100%);
    /* 因为后面将带有绝对定位属性的前进和后退按钮放在了图片可视区的外面，所以需要给外层<div>添加相对定位 */
    position: relative;
    /* 设置图片可视区内的样式 */
    .swiper-container {
        /* 设置图片可视区的宽高，因为自带了margin: 0 auto; 所以会在外层<div>里水平居中*/
        width: 626px;
        height: 470px;
        .swiper-wrapper {
            .swiper-slide {
                /* 不用管.swiper-wrapper和.swiper-slide，只需要设置里面的图片样式 */
                img {
                    width: 626px;
                    height: 470px;
                }
            }
        }
    }
    /* 设置后退按钮的样式 */
    .swiper-button-prev {
        width: 40px;
        height: 80px;
        .bgImg(‘/swiper_prev.png‘);
        .bgSize(100, 100%);
        position: absolute;
        left: 0;
        top: 50%;
        margin-top: -60px;
    }
    /* 设置前进按钮的样式 */
    .swiper-button-next {
        width: 40px;
        height: 80px;
        .bgImg(‘/swiper_next.png‘);
        .bgSize(100, 100%);
        position: absolute;
        right: 0;
        top: 50%;
        margin-top: -60px;
    }
}
.nav {
    /* 因为分页器自带绝对定位属性，所以需要给它的父级元素添加相对或者绝对定位属性，并且给予一个固定的高度 */
    position: relative;
    height: 50px;
    .swiper-pagination {
        /* 设置分页器的样式，水平居中，清除浮动 */
        width: 906px;   
        padding-left: 105px;
        box-sizing: border-box;
        .clearFl;
        /* 设置每一个分页按钮的样式 */
        .swiper-pagination-switch {
            .fl;
            width: 100px;
            height: 30px;
            font-size: 20px;
            color: #999;
            margin-right: 100px;
            cursor: pointer;
        }
        /* 设置每一个分页按钮被选中时的样式 */
        .swiper-active-switch {
            color: #000;
        }
    }
}
/* 设置图片对应的文本内容的样式 */
.text {
    position: relative;
    height: 50px;
    li {
        width: 400px;
        position: absolute;
        left: 50%;
        margin-left: -200px;
        top: 0;
        font-size: 20px;
        opacity: 0;
        line-height: 35px;
        &.active {
            opacity: 1;
        }
    }
}

(3)js文件内容：

$(function(){
     // 实例化mySwiper对象
     var mySwiper = new Swiper (‘.swiper-container‘,{
         initialSlide: 0 , //设置初始化时slide的索引，默认0
         autoplay: 2000, // 设置自动切换的时间间隔，默认0
         speed: 3000, // 设置滑动速度，默认为300
         loop: true, // 是否开启无缝轮播，默认false
         loopAdditionalSlides: 0, // 设置loop模式下在slides前后复制若干个slide，默认为0，即前后各复制一个(0,1,2 --> 2,0,1,2,0)
         slidesPerView: 1, //设置slider容器能够同时显示的slides数量，默认为1，如果要选auto还需设置loopedSlides参数
         slidesPerGroup: 1, //设置上述情况下slides的数量多少为一组，默认为1,
         useCSS3Transforms: false, // 不想使用css3 transforms来设定slide的位移而是使用wrapper的left/top属性则可以将此参数设置为false
         DOMAnimation: true, // 在不支持css transitions(IE7-9)的浏览器上是否使用自定义的DOM动画，默认为true,
         pagination: ‘.swiper-pagination‘, //定义分页器，默认会在这个分页器里面生成与slide对应的<span>标签，要求类型是css选择器或者HTML标签
         paginationClickable: true, // 当值为true时，点击分页器的指示点时会发生Swiper
         autoplayDisableOnInteraction: false, // 用户操作swiper之后，是否禁止autoplay，默认为true
         onSlideChangeStart: function(swiper){ // 触发slider切换的回调函数，输出的activeIndex是切换后的slide索引值
              // 同步改变每个分页器对应的在轮播图之外的内容
              var idx = swiper.activeIndex - 1;
              var textArr = $(‘.text li‘,$(‘.figure_wrap‘));
              textArr.eq(idx).addClass(‘active‘).siblings().removeClass(‘active‘);
              // 由于每次切换的时候，类名会自动替换，最开始追加的自定义类名会消失，所以需要在这里重新追加
              var switchArr = $(‘.swiper-pagination span‘);
              switchArr.each(function(idx,ele){
                     $(this).addClass(‘bullet‘+idx);
              }) 
         },
         freeMode :false, // 若为true则是自由模式，不会自动贴合滑动位置
         noSwiping: false, // 设为true时，可以在slide上增加类名‘swiper-no-swiping‘，使该slide无法滑动
         simulateTouch: true, // 默认为true，Swiper接受鼠标点击、拖动。
         followFinger: false, // 如设置为false，拖动slide时它不会动，当你释放时slide才会切换
     }  
 
     // 自定义分页器里面的文本内容，有时需要给每个选项追加新的类名
     var switchArr = $(‘.swiper-pagination span‘);
     switchArr.eq(0).text(‘第一个分页按钮‘).addClass(‘bullet0‘) ;
     switchArr.eq(1).text(‘第二个分页按钮‘).addClass(‘bullet1‘) ;
     switchArr.eq(2).text(‘第三个分页按钮‘).addClass(‘bullet2‘) ;

     // 自定义前进和后退按钮
     $(‘.swiper-button-prev‘).on(‘click‘,function(){
           mySwiper.swipePrev();
     })
     $(‘.swiper-button-next‘).on(‘click‘,function(){
           mySwiper.swipeNext();
     }) 
})

更多参数请去官网自行查询，http://2.swiper.com.cn/api/index.html

 

2.移动端，swiper3，滑动效果

先要引入swiper-3.4.1.min.css和swiper-3.4.1.jquery.min.js（需要先引入jquery类库）；

(1)html文件内容：

<div class="figure_wrap">
    <!-- 放在外部的分页器容器 -->
    <div class="nav">
        <!-- 图片对应的分页器 -->
        <div class="swiper-pagination"></div>
    </div>   

    <!-- 图片和对应的文本的外层容器 -->
    <div class="figure">
        <!-- 文本容器 -->
        <div class="text">
            <section class="active">
                <h3>公众号收银台</h3>
                <p>润联网络在微信中建立了公众号收银台，同时支持支付宝和微信收款，收银台不仅拥有完善的店员等级管理系统，同时还能用于POS收银机商户。</p>
                <div class="wrap"><a href="subscription.html">了解更多 ></a></div>
            </section>

            <section>
                <h3>POS收银机</h3>
                <p>润联POS终端收银机，不仅支持普通的刷卡业务，同时能使用订单支付，并且绑定手机公众号后，能使用公众号的功能，也能绑定多个收银员收款。</p>
                <div class="wrap"><a href="pos.html">了解更多 ></a></div>
            </section>           

            <section>
                <h3>收银宝软件</h3>
                <p>润联收银宝是在WINDOWS系统上开发的，用于收银机上的收款软件，具有打印公众号收银小票和利用扫码枪反扫收款等功能。</p>
                <div class="wrap"><a href="cashbaby.html">了解更多 ></a></div>
            </section>                                           
        </div>

        <!-- 图片容器，也叫图片的可视区 -->        
        <div class="swiper-container">
            <!-- 包裹图片的父级元素 -->
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="img/slide1.png" alt=""></div>
                <div class="swiper-slide"><img src="img/silde2.png" alt=""></div>
                <div class="swiper-slide"><img src="img/silde3.png" alt=""></div>
            </div>
        </div>                   
    </div>           
</div>

(2)less文件内容：

.figure_wrap{
    .nav{
        /* 因为分页器自带绝对定位属性，所以需要给它的父级元素添加相对或者绝对定位属性，并且给予一个固定的高度 */  
        position: relative;
        height: 2.65rem;
        padding: 0.7rem 0.4rem 0.4rem;
        box-sizing: border-box;
        .swiper-pagination{
            /* 因为分页器自带绝对定位属性，如果需要依据父级元素来确定宽度，就要设置宽度百分比或者css3的计算函数 */
            width: calc(~‘100% - 0.8rem‘);
            /* 添加弹性盒，子元素就会自动归为一行并且不会产生多余的空隙 */
            display: block;
            .swiper-pagination-bullet{
                /* 因为每一个分页按钮自带了固定的宽高，所以需要按照自己的需求进行手动修改 */
                width: auto;
                height: 1.55rem;
                /* 横向均分父元素的宽度 */
                flex: 1;
                /* 因为每一个分页按钮自带了圆角、透明度、背景颜色以及手势样式，所以需要按照自己的需求进行手动修改 */
                border-radius: 0;
                opacity: 1;
                cursor: auto;
                /* 添加其他公共样式 */
                font-size: 0.28rem;
                color: #999;
                display: flex;
                justify-content: center;
                align-items: flex-end;/* 对每一个分页按钮添加私有样式 */
                &.bullet1{
                    .bgImg(‘/product_page1.png‘,center);
                    .bgSize(0.52rem);
                }
                &.bullet2{
                    .bgImg(‘/product_page2.png‘,center);
                    .bgSize(1.05rem);
                }
                &.bullet3{
                    .bgImg(‘/product_page3.png‘,center);
                    .bgSize(1rem);
                }
                /* 修改和添加被选中的分页按钮的样式 */                                                
                &.swiper-pagination-bullet-active{
                    color: @color_blue;
                    &.bullet1{
                        .bgImg(‘/product_page1_active.png‘,center);
                        .bgSize(0.52rem);
                    }
                    &.bullet2{
                        .bgImg(‘/product_page2_active.png‘,center);
                        .bgSize(1.05rem);
                    }
                    &.bullet3{
                        .bgImg(‘/product_page3_active.png‘,center);
                        .bgSize(1rem);
                    }                               
                }
            }
        }
    }
    .figure{
        padding: 0.55rem 0.4rem 0.85rem;
        /* 设置图片对应的文本内容的样式 */
        .text{
            height: 3.5rem;
            position: relative;
            section{
                position: absolute;
                left: 0;
                top: 0;
                display: none;
                &.active{
                    display: block;
                }
                h3{
                    font-size: 0.36rem;                 
                }
                p{
                    font-size: 0.28rem;
                    line-height: 0.5rem;
                    margin: 0.35rem 0 0.4rem;
                }
                .wrap{
                    a{
                        display: block;
                        font-size: 0.28rem;
                        color: @color_blue;                               
                    }
                }
            }
        }
        /* 修改和添加图片区域的样式 */
        .swiper-container{
            /* 给定可视区容器的宽高 */
            width: 5.5rem;
            height: 4rem;
            margin: 0 auto;
            .swiper-wrapper{
                .swiper-slide{
                    /* 因为.swiper-wrapper和.swiper-slide的宽度都是默认100%，所以都是和可视区的宽高相匹配，只需要设置里面的图片样式 */
                    display: flex;

                    justify-content: center;
                    align-items: center;
                    img{
                        &:nth-child(1){
                            width: 4.42rem;
                        }
                        &:nth-child(2){
                            width: 5.42rem;
                        }
                        &:nth-child(3){
                            width: 5.23rem;
                        }                                                               
                    }
                }
            }
        }
    }
}

(3)js文件内容：

$(function(){
    // 实例化swiper
    var mySwiper = new Swiper(‘.swiper-container‘,{
        effect: ‘slide‘, // 设置slide的切换效果，默认为slide
        autoplay: 0, // 设置自动切换的时间间隔，默认为0，不设定该参数或者设为0，slide不会自动切换
        speed: 1000, // 设置切换效果所需要花费的时间，默认为300
        loop: true, // 是否无缝循环，默认为false
        loopAdditionalSlides: 0, // loop模式下会在slides前后复制若干个slide，默认为0，即前后各复制1个
        pagination: ‘.swiper-pagination‘, // 设置分页器容器的css选择器或HTML标签
        paginationType: ‘bullets‘, // 设置分页器样式类型，默认为‘bullets‘即圆点
        paginationClickable: true, // 是否可以点击分页器来控制切换，默认为false
        autoplayDisableOnInteraction: false, // 用户操作swiper之后，是否禁止autoplay，默认为true
        paginationHide: false, // 点击swiper是否会隐藏分页器，默认为false
        paginationElement: ‘li‘, // 设定分页器指示器的HTML标签，默认为‘span‘，如果是自定义渲染，此项设置无效
        paginationBulletRender: function (swiper,index, className) { // 自定义当样式为‘bullets‘时分页器的内容，接受当前页的索引值和类名作为参数
              // console.log(arguments);
              var className2;
              var text;
              switch(index){
                  case 0:
                  className2 = ‘bullet1‘;
                  text = ‘这是第一个分页按钮‘;
                  break;
                  case 1:
                  className2 = ‘bullet2‘;
                  text = ‘这是第二个分页按钮 ‘;
                  break;
                  case 2:
                  className2 = ‘bullet3‘;
                  text = ‘这是第三个分页按钮 ‘;
                  break;
              }
              return ‘<div class="‘ + className + ‘ ‘ + className2 + ‘">‘ + text +‘</div>‘; // 实际显示多个具有某个相同类名的通用标签，不同的是各自另外带上的类名和标签的文本内容
          },
         // paginationCustomRender: function (swiper,current, total) { // 自定义当样式为‘custom‘时分页器的内容，接受当前页数和总数作为参数
              // return ‘<span class="‘ + current + ‘">‘ + current +‘of‘ + total +‘</span>‘; // 实际显示一个通用的标签，改变的只是该标签的文本内容
          // },
          uniqueNavElements: false, // 默认为true，表示仅本swiper的container内的分页器有效，设置为false后，container以外的分页器也生效了
          prevButton: ‘.swiper-button-prev‘, // 设置前进按钮的css选择器或HTML元素
          nextButton: ‘.swiper-button-next‘, // 设置后退按钮的css选择器或HTML元素
          preventClicks: true ,// 是否在swiper发生触摸时阻止默认事件（preventDefault），默认为true
          onSlideChangeStart: function(swiper){ // 触发slider切换的回调函数，输出的activeIndex是切换后的slide索引值
            // 同步改变每个分页器对应的在轮播图之外的内容
            var idx = swiper.activeIndex - 1;
            var textArr = $(‘.text section‘,$(‘.figure‘));
            $(textArr[idx]).addClass(‘active‘).siblings().removeClass(‘active‘);
        }
    });
})

更多参数请去官网自行查询，http://www.swiper.com.cn/

 

3.移动端，swiper3，渐隐渐现效果

先要引入swiper-3.4.1.min.css和swiper-3.4.1.jquery.min.js（需要先引入jquery类库）；

(1)html文件内容：

<!-- 如果需要在图片可视区的周围添加一些样式，需要在外层套上一层<div> -->
<div class="swiper-container-wrapper">
    <!-- 图片可视区 -->
    <div class="swiper-container">
        <!-- 包裹图片的父级元素 -->
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="img/slide1.png" alt=""></div>
            <div class="swiper-slide"><img src="img/slide2.png" alt=""></div>
            <div class="swiper-slide"><img src="img/slide3.png" alt=""></div>
        </div>
    </div>       

    <!-- 前进和后退按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>                       
</div>

<!-- 放在外部的分页器容器 -->
<div class="nav">
    <!-- 图片对应的分页器 -->
    <div class="swiper-pagination"></div>
</div>   

<!-- 文本容器 -->
<ul class="text">
    <li class="active">这是第一个分页对应的文本</li>
    <li>这是第二个分页对应的文本</li>
    <li>这是第三个分页对应的文本</li>
</ul>

(2)less文件内容：

.swiper-container-wrapper{
    /* 设置图片可视区的外层<div>的样式 */
    height: 4.2rem;
    .bgImg(‘/swiper_container.png‘);
    .bgSize;
    /* 因为子元素设置了margin-top，为了防止父元素下沉，所以要加上overflow:hidden; */
    overflow: hidden;       
    /* 设置图片可视区内的样式 */
    .swiper-container{
        /* 设置图片可视区的宽高，因为自带了margin: 0 auto; 所以会在外层<div>里水平居中*/
        width: 4.5rem;
        height: 3.45rem;
        margin-top: 0.15rem;
        .swiper-wrapper{
            .swiper-slide{
                /* 不用管.swiper-wrapper和.swiper-slide，只需要设置里面的图片样式 */
                img{
                    width: 4.7rem;
                    height: 3.54rem;
                }
            }
        }
    }
    /* 隐藏前进和后退按钮 */
    .swiper-button-prev,.swiper-button-next{
        display: none;
    }
}
.nav{
    /* 因为分页器自带绝对定位属性，所以需要给它的父级元素添加相对或者绝对定位属性，并且给予一个固定的高度 */
    position: relative;
    height: 1rem;
    line-height: 1rem;
    .swiper-pagination{
        /* 因为分页器自带绝对定位属性，如果需要依据父级元素来确定宽度，就要设置宽度百分比或者css3的计算函数 */
        width: 100%;
        /* 添加弹性盒，子元素就会自动归为一行并且不会产生多余的空隙 */
        display: flex;
        .swiper-pagination-bullet{
            /* 因为每一个分页按钮自带了固定的宽高，所以需要按照自己的需求进行手动修改 */
            width: auto;
            height: auto;
            /* 横向均分父元素的宽度 */
            flex: 1;
            /* 因为每一个分页按钮自带了圆角、透明度、背景颜色以及手势样式，所以需要按照自己的需求进行手动修改 */
            border-radius: 0;
            opacity: 1;
            cursor: auto;
            background-color: transparent;
            /* 添加其他公共样式 */
            font-size: 0.2rem;
            color: #999;
            /* 修改和添加被选中的分页按钮的样式 */     
            &.swiper-pagination-bullet-active{
                color: #000;
            }
        }
    }
}       
/* 设置图片对应的文本内容的样式 */
.text{
    position: relative;
    height: 1rem;
    line-height: 1rem;
    li{
        width: 100%;
       font-size: 0.28rem;
        opacity: 0;
        position: absolute;
        left: 0;
        top: 0;
        transition: opacity 0.5s;
        &.active{
            opacity: 1;
            transition: opacity 0.5s;
        }
    }
}

(3)js文件内容：

$(function(){
    var mySwiper = new Swiper(‘.swiper-container‘,{
        effect: ‘fade‘, // 设置slide的切换效果，默认为slide
        fade: false, // 设置fade的效果参数，默认为false，表示关闭淡出，即过渡中的slide透明度从0->1（淡入），其他slide透明度变为0
        autoplay: 2000, // 设置自动切换的时间间隔，默认为0，不设定该参数或者设为0，slide不会自动切换
        speed: 1000, // 设置切换效果所需要花费的时间，默认为300
        loop: true, // 是否无缝循环，默认为false
        loopAdditionalSlides: 0, // loop模式下会在slides前后复制若干个slide，默认为0，即前后各复制1个
        pagination: ‘.swiper-pagination‘, // 设置分页器容器的css选择器或HTML标签
        paginationType: ‘bullets‘, // 设置分页器样式类型，默认为‘bullets‘即圆点
        paginationClickable: true, // 是否可以点击分页器 来控制切换，默认为false
        autoplayDisableOnInteraction: false, // 用户操作swiper之后，是否禁止autoplay，默认为true
        paginationHide: false, // 点击swiper是否会隐藏分页器 ，默认为false
        paginationElement: ‘li‘, // 设定分页器指示器的HTML标签，默认为‘span‘，如果是自定义渲染，此项设置无效
        paginationBulletRender: function (swiper,index, className) { // 自定义当样式为‘bullets‘时分页器的内容，接受当前页的索引值和类名作为参数
              // console.log(arguments);
              var text;
              switch(index){
                  case 0:
                       text = ‘这是第一个分页按钮‘;
                       break;
                  case 1:
                       text = ‘这是第二个分页按钮 ‘;
                       break;
                  case 2:
                       text = ‘这是第三个分页按钮 ‘;
                       break;
              }
              return ‘<div class="‘ + className + ‘">‘ + text +‘</div>‘; // 实际显示多个类名相同的通用标签，不同的是各自的文本内容
          },
        // paginationCustomRender: function (swiper,current, total) { // 自定义当样式为‘custom‘时分页器的内容，接受当前页数和总数作为参数
            // return ‘<span class="‘ + current + ‘">‘ + current +‘of‘ + total +‘</span>‘; // 实际显示一个通用的标签，改变的只是该标签的文本内容
        // },
        uniqueNavElements: true, // 默认为true，表示仅本swiper的container内的分页器有效，设置为false后，container以外的分页器也生效了
        prevButton: ‘.swiper-button-prev‘, // 设置前进按钮的css选择器或HTML元素
        nextButton: ‘.swiper-button-next‘, // 设置后退按钮的css选择器或HTML元素
        preventClicks: true ,// 是否在swiper发生触摸时阻止默认事件（preventDefault），默认为true
        onSlideChangeStart: function(swiper){ // 触发slider切换的回调函数，输出的activeIndex是切换后的slide索引值
            // 同步改变每个分页器对应的在轮播图之外的内容
            var idx = swiper.activeIndex - 1;
            var textArr = $(‘.text li‘,$(‘.figure_wrap‘));
            $(textArr[idx]).addClass(‘active‘).siblings().removeClass(‘active‘);
        }
    })
})

更多参数请去官网自行查询，http://www.swiper.com.cn/