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.锚导航

  • 相关阅读:
    2021年Mysql个税计算公式,自定义函数
    安装篇-安装mysql8
    安装篇-安装Nginx
    jsconfig.json配置Webpack别名,识别@
    Avue动态校验表单的必填校验
    renren开源把时间类型Date换为LocalDate报错
    Avue的CRUD最强封装(三)
    Avue-curd通用模板(二)
    Kalman Filter算法详解
    STM32 ADC DMA 中断模式多通道读取ADC转换值
  • 原文地址:https://www.cnblogs.com/dyy-dida/p/11128345.html
Copyright © 2011-2022 走看看