vue-awesome-swiper简单使用

首先先下包

npm i vue-awesome-swiper@4.1.1 swiper@5.2.0

或者

yarn add vue-awesome-swiper@4.1.1 swiper@5.2.0

组件引入

import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import "swiper/css/swiper.css";

开始使用

<template>
  <div class="box">
      <swiper
          key="msgImg"
          :options="swiperOption"
          class="Msg-img"
        >
          <template v-for="(item, index) in list">
            <swiper-slide :key="index">
              <!-- {{item.thumb.split(',')}} -->
              <img :src="item.img" alt="">
              </swiper-slide
            >
          </template>

          <div class="swiper-pagination" slot="pagination"></div>
          <div class="swiper-button-prev" slot="button-prev"></div>
          <div class="swiper-button-next" slot="button-next"></div>
        </swiper>
  </div>
</template>

<script>
// 引入vue-awesome-swiper
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import "swiper/css/swiper.css";
// 利用webpack将图片打包好
import img from '@/assets/img/home/recommend_bg.jpg';

export default {
  name: "Cli3App",

  components: {
    Swiper,
    SwiperSlide,
  },

  data() {
    return {
      // 数据初始化
      list: [],
      // 轮播图配置
      swiperOption: {
        slidesPerView: 1,
        // 设置分页器
        pagination: {
          el: ".swiper-pagination",
          // 设置点击可切换
          clickable: true,
        },
        // 设置前进后退按钮
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        // 设置自动轮播
        autoplay: {
          delay: 3000, // 5秒切换一次
        },
        // 设置轮播可循环
        loop: true,
      },
    };
  },

  created() {
    // 获取数据
    this.list = [
      {
        img
      },
      {
        img
      },
      {
        img
      },
      {
        img
      },
    ];
  },
};
</script>

<style lang="css" scoped>
.Msg-img {
  width: 740px;
}
</style>

注意：

        vue-awesome-swiper的版本4.1.1必须和swiper的5.2.0版本一起用

        不同版本swiper.css的路径不同