zoukankan      html  css  js  c++  java
  • 无间隙循环轮播效果

    一.效果

    二.下载依赖

    cnpm install swiper@5.4.5 --save
    cnpm install vue-awesome-swiper@4.1.1 --save
    

    三.使用

    1.先在main.js 里引入 swiper依赖的css

    import 'swiper/dist/css/swiper.css';
    

    2.在组件里引用 seiper

    import { Swiper, SwiperSlide } from "vue-awesome-swiper";

     <swiper  ref="mySwiper" :options="swiperOption"  class="swiper-content swiper-container" >
        <swiper-Slide class="swiper-slide" v-for="(item, index) in swiperList"  :key="index" >
           <div class="img"><img :src="item.pic" alt="" /></div>
         </swiper-Slide>
      </swiper>
    

    3.配置swiper属性

    swiperOption: {
      loop: true, // 自动播放
        autoplay: {
         delay: 0,
         disableOnInteraction: false,
         },
         speed: 3000, // 播放速度
         direction: "horizontal", //默认horizontal, 水平轮播
         slidesPerView: "auto", //默认1, 同时显示的slides数量,auto 代表根据轮播图的宽度排列
         spaceBetween: 62, //轮播图之间的间距
         // freeMode: false,
         freeModeMomentum: false,
         observer: true, // 修改swiper自己或子元素时,自动初始化swiper
         observeParents: true, // 修改swiper的父元素时,自动初始化swiper
     },
    

    四.把滚动动画设置成 匀速

    .swiper-container .swiper-wrapper{
      -webkit-transition-timing-function: linear; /*之前是ease-out*/
      -moz-transition-timing-function: linear;
      -ms-transition-timing-function: linear;
      -o-transition-timing-function: linear;
      transition-timing-function: linear;
    }
    
  • 相关阅读:
    Mac ssh登陆linux并且显示linux图形
    github proxy
    [makefile] filter-out
    linux svn
    界面UI测试的方法
    UI测试
    web 页面中 四种常见 必测控件
    面试工作经验参考
    测试用例
    接口测试基础
  • 原文地址:https://www.cnblogs.com/cl1998/p/15165531.html
Copyright © 2011-2022 走看看