Vue 轮播图 swiper

1. 安装依赖 npm i swiper@5 --save
npm i vue-awesome-swiper@3 --save

2. 全局配置 在main.js里面配置

import  VueAwesomeSwiper  from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
Vue.use(VueAwesomeSwiper)

3. 新建轮播图组件 MySwiper.vue

<template>
  <div id="app">
    <swiper ref="mySwiper" :options="swiperOptions">
      <swiper-slide>slide1</swiper-slide>
      <swiper-slide>slide2</swiper-slide>
      <swiper-slide>slide3</swiper-slide>
      <swiper-slide>slide4</swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      swiperOptions: {
        pagination: {
          el: ".swiper-pagination",
        },
        loop: true,
        autoplay: {
          delay: 2000,
        },
      },
    };
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.$swiper;
    },
  },
};
</script>

<style>
.swiper-container {
  width: 600px;
  height: 400px;
}
</style>

❤️如果轮播图数据是通过异步的方式获得的，轮播图配置的效果可能会有一些问题，此时需要使用v-if判断数据是否已经获得。

<template>
  <div id="app">
    <swiper ref="mySwiper" :options="swiperOptions" v-if="imglist.length">
      <swiper-slide v-for="(item,index) in imglist" :key="index">
        <img :src="item.imgurl" width="100%" height="100%" />
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "App",
  created() {
    axios.get("/data/images.json").then((res) => {
      this.imglist = res.data.imgs;
    });
  },
  data() {
    return {
      imglist: [],
      swiperOptions: {
        pagination: {
          el: ".swiper-pagination",
          clickable:true
        },
        loop: true,
        effect:'cube',
        autoplay: {
          delay: 1500,
          stopOnLastSlide: false,
          disableOnInteraction: false,
        },
      },
    };
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.$swiper;
    },
  },
};
</script>

<style>
.swiper-container {
  width: 600px;
  height: 400px;
}
</style>