vue swiper动态显示带指示点可手滑切换轮播图PC端手机端适用

 

 1、下载依赖（不带版本号会缺少文件）

npm install [email protected] --save

2、main.js 引入

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

3、在单页面中使用

<template>
  <div>
    <swiper ref="mySwiper" class="swiperbox" :options="swiperOption">
      <swiper-slide class="swiper-slide" v-for="image in data" :key="image.id">
        <img style="width: 100vw" :src="image.image" />
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>
<script>
export default {
  data() {
    return {
      data: null,
      swiperOption: {
        //分页
        pagination: ".swiper-pagination",
        //点击切换
        paginationClickable: true,
        //自动播放时间
        autoplay: 3000,
        //切换速度
        speed: 1000,
        loop: true,
        //用户操作swiper之后，是否禁止autoplay.默认为true：停止。
        autoplayDisableOnInteraction: false,
        //拖动释放时不会输出信息，阻止click冒泡。拖动Swiper时阻止click事件。
        preventLinksPropagation: true,
      },
    };
  },
  mounted() {
    let url = "api/index/getIndexBannerList";
    this.axios.get(url).then((res) => {
      this.data = res.data.data;
      // console.log(this.data);
    });
  },
};