vue-awesome-swiper，vue轮播图插件的使用（自用版）

Tvue-awesome-swiper，vue轮播图插件的使用（自用版）

注意：如果从接口获取轮播图，要等获取到数据的时候再渲染dom生成，使轮播图循环生效

mounted() {
    this.xxx();  //获取轮播图的方法
  },

vue-awesome-swiper的GitHub地址 https://github.com/surmon-china/vue-awesome-swiper/tree/v3.1.3

一、下载安装

在终端输入命令

npm install vue-awesome-swiper --save

npm install vue-awesome-swiper@3 --save   //vue2 不能下载最新swipe版本的话就加个@3

二、在组件中引入

import "swiper/dist/css/swiper.css";
import { swiper, swiperSlide } from "vue-awesome-swiper";

三、HTML代码和JavaScript代码（参数解释）

<template>
  <div id="pageFive">
    <div class="swiper-content">
      <div class="slider-box">
        <swiper :options="swiperOption" ref="mySwiper">
          <!-- 轮播图 -->
          <swiper-slide>
            <img src="@/assets/img/……" alt=""
          /></swiper-slide>
          <swiper-slide>
            <img src="@/assets/img/……" alt=""
          /></swiper-slide>
          <swiper-slide>
            <img src="@/assets/img/……" alt=""
          /></swiper-slide>
          <!-- 轮播点 -->
          <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
      </div>
      <!-- 分页器 -->
      <div class="swiper-button-prev swiper-button"></div>
      <div class="swiper-button-next swiper-button"></div>
    </div>
  </div>
</template>

<script>
import "swiper/dist/css/swiper.css";
import { swiper, swiperSlide } from "vue-awesome-swiper";
export default {
  name: "xxxxx",
  components: {
    swiper,
    swiperSlide,
  },
  data() {
      return {
        swiperOption: {
          effect: "coverflow", //Slide的切换效果(3d)
          centeredSlides: true, //设定为true时，居中，默认状态下居左
          slidesPerView: "1.3", //设置slider容器能够同时显示的slides数量
          watchOverflow: true, //watchOverflow，当没有足够的slide切换时，swiper会失效且隐藏导航等。默认不开启这个功能...
          coverflowEffect: {
            rotate: 0, //slide做3d旋转时Y轴的旋转角度
            stretch:0, //每个slide之间的拉伸值，越大slide靠得越紧。5.3.6 后可使用%百分比
            depth: 200, //slide的位置深度。值越大z轴距离越远，看起来越小。
            modifier:1, //depth和rotate和stretch的倍率，相当于depth*modifier、rotate*modifier、stretch*modifier，值越大这三个参数的效果越明显。
            slideShadows: true, //是否开启slide阴影
          },
          autoplay: {  //在slide自动切换开始时执行
            delay: 5000,
            disableOnInteraction: false, //用户操作swiper之后，是否禁止autoplay。默认为true：停止。
          },
          loop: true,  //是否开启循环
          navigation: {  //前进后退按钮
            nextEl: ".swiper-content .swiper-button-next",
            prevEl: ".swiper-content .swiper-button-prev",
          }, 
          pagination: {  //分页器导航
            el: ".swiper-content .swiper-pagination",
            clickable:true
          },
          speed:800, //切换速度，即slider自动滑动开始到结束的时间
          preventClicksPropagation: true, //阻止click冒泡。拖动Swiper时阻止click事件。
          simulateTouch: false, //鼠标模拟手机触摸。默认为true，Swiper接受鼠标点击、拖动。
         
        },
      };
    },
};
</script>

最后效果