vue swiper4使用

swiper中文官网：https://www.swiper.com.cn/api/index.html

第一步：下载swiper 插件  

 npm install swiper --save-dev 

第二步：在main.js中引入  

import Swiper from 'swiper'

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

 

第三步：在需要使用swiper的组件里引入swiper，初始化放在mounted里

import Swiper from "swiper";

mounted() {

    let that = this;//如果下面想要使用变量，请定义

    that.mySwiper = new Swiper(".swiper-container", {

      autoplay: false, //是否自动滚动

      loop: false,//是否可以循环

      initialSlide: 0, //初始化第几页

      navigation: {

        nextEl: ".swiper-button-next",

        prevEl: ".swiper-button-prev"

      },//使用左右按钮

      on: {

        transitionEnd() {  //点击过渡完触发事件

          that.activeIndex = that.mySwiper.activeIndex; //activeIndex轮播下标

        }

      }//事件

    });

    this.mySwiper.slideTo(index, 500, false); //点击跳转到指定的图片中

  }

 

第四步：文件template中

<div class="swiper-container">//class名一定不可以改变

        <div class="swiper-wrapper">

               <img src="../../assets/whalbum/example1.png" class="swiper-slide" />//img为循环的部分

               <img src="../../assets/whalbum/yyl.png" class="swiper-slide" />

               <img src="../../assets/whalbum/example1.png" class="swiper-slide" />

               <img src="../../assets/whalbum/example1.png" class="swiper-slide" />

                <img src="../../assets/whalbum/example1.png" class="swiper-slide" />

         </div>

         <img src="../../assets/whalbum/arrow.png" class="swiper-button-next" />//左右箭头(这是自定义写的)

         <img src="../../assets/whalbum/arrow.png" class="swiper-button-prev" />

　　　　<!--<div class="swiper-button-next"></div>-->//这是原本的左右箭头

　　　　<!--<div class="swiper-button-prev"></div>-->

   </div>

 

第五步:修改箭头样式（如果不修改可以略过）

　.swiper-container {

        position: relative;

        .swiper-button-next,

        .swiper-button-prev {

          outline: none;

          background: none;

           75px;

          height: 100px;

          top: 35%;

        }

        .swiper-button-next {

          transform: rotate(180deg);

        }

        .swiper-button-next:before {

          left: 0;

        }

        .swiper-button-prev:before {

          right: 0;

        }

      }