zoukankan      html  css  js  c++  java
  • swiper4的用法

    1.swiper:HTML结构

    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">slider1</div>
            <div class="swiper-slide">slider2</div>
            <div class="swiper-slide">slider3</div>
        </div>
    </div>
    

      2.样式

           .swiper-container{
                margin:0 auto;
                100px;
                height:200px;
                overflow: hidden;
                border:1px solid red;
            }
            .swiper-wrapper,.swiper-slide{
                100px;
                height:200px;
            }
    

      3.水平轮播

    var mySwiper = new Swiper('.swiper-container', {
            autoplay: true,//可选选项,自动滑动
            loop:true
        })
    

      4.垂直轮播

        var mySwiper = new Swiper('.swiper-container', {
            autoplay: true,//可选选项,自动滑动
            direction : 'vertical',//控制滚动的方向,水平或垂直
            loop:true
        })
    

      5.轮播可视区域展示多个slide项

       var mySwiper = new Swiper('.swiper-container', {
            autoplay: true,//可选选项,自动滑动
            direction : 'vertical',
            loop:true,
            slidesPerView : 3,//设置slider容器能够同时显示的slides数量(carousel模式)
        })
    

      

      6.左右切换,获取activeIndex的值

    var mySwiper = new Swiper('.swiper-container',{
      on: {
        //slideChangeTransitionStart开始切换时告诉我现在是第几个slide
    
    
        slideChangeTransitionEnd: function(){
          alert(this.activeIndex);//切换结束时,告诉我现在是第几个slide
        },
      },
    })
    

      7.分页1/3展示效果

    var mySwiper = new Swiper('.swiper-container',{
        pagination: {
           el: '.swiper-pagination',
           type:'fraction',
           //type: 'bullets',圆点默认
           //type: 'fraction',分页
           //type : 'progressbar',进度条
           //type : 'custom',自定义
         },
    
    })
    

      8.延迟加载图片

      9.滚动条

      10.缩略图

      11.锚导航

  • 相关阅读:
    ELK 一些截图
    AD域
    NPOI
    搭建harbor
    【【【【日常问题记录】】】】
    golang yaml配置文件解析
    golang操作mysql使用总结
    【转】mysql优化步骤
    【转】Mysql事务,并发问题,锁机制
    golang curl
  • 原文地址:https://www.cnblogs.com/dyy-dida/p/11128345.html
Copyright © 2011-2022 走看看