vue-swiper輪播圖

效果：

代碼：

<!--<link rel="stylesheet" href="icon-font-che/iconfont.css">-->

<template>
  <div>
    <swiper class="swiperMain">
      <swiper-slide class="swiper-slide" v-for="(item,index) in slide" :key="index" ref="mSwiper">
        <img src="https://www.baidu.com/img/bd_logo1.png?where=super">
        <!-- 如果需要導航按鈕 -->
        <!--<div class="swiper-button-prev"></div>-->
        <!--<div class="swiper-button-next"></div>-->
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
    <div>我是第{{index}}個輪播圖</div>

  </div>
</template>

<script>
  import Swiper from "swiper";
  // import 'swiper/dist/css/swiper.css';

  export default {
    name: "FontTest",
    data() {
      return {
        slide: [1, 2, 3],
        index: -1,//當前的條目索引
        arrs: [1, 2, 3],
        tip: '',
        //設置屬性
        // swiperOption: {
        //   //顯示分頁
        //   pagination: {
        //     el: '.swiper-pagination',
        //     clickable: true //允許分頁點擊跳轉
        //   },
        //   //設置點擊箭頭
        //   navigation: {
        //     nextEl: '.swiper-button-next',
        //     prevEl: '.swiper-button-prev'
        //   },
        //   //自動輪播
        //   autoplay: {
        //     delay: 2000
        //   },
        //   //開啓循環模式
        //   loop: true,
        //   //開啓鼠標滾輪控制Swiper切換
        //   mousewheel: true,
        //   //點擊事件
        //   on: {
        //     click: (event) => {
        //       let selfImg = event.target
        //       let parent = selfImg.parentElement;
        //       console.log(parent.className)
        //       if (parent.className.indexOf("swiper-slide-active") != -1) {
        //         console.log(selfImg)
        //       }
        //       event.preventDefault()
        //     },
        //     slideChangeTransitionEnd: function () {
        //       console.log('this.activeIndex=' + this.activeIndex)
        //       console.log(this.realIndex);
        //     },
        //   },
        // }
      }
    },
    watch: {},
    computed: {},
    mounted() {
      this.swiper_init();
    },
    methods: {
      //採用代碼的方式初始化可以使用methods的this屬性
      //Swiper左右滾動初始化
      swiper_init() {
        var vm = this;
        this.$nextTick(function () {
          var mySwiper = new Swiper('.swiper-container', {
            // direction: 'vertical', // 垂直切換選項
            autoplay: {//自動播放
              delay: 3000,
              disableOnInteraction: false,//用戶操作swiper之後，是否禁止autoplay。默認爲true：停止。
            },
            //當你點擊tab切換時swiper滑動失效
            observer: true, observeParents: true,//這個是啓動動態檢查器(OB/觀衆/觀看者)，當改變swiper的樣式（例如隱藏/顯示）或者修改swiper的子元素時，自動初始化swiper。
            loop: true, // 循環模式選項
            // slidesPerView: 1,//設置slider容器能夠同時顯示的slides數量
            // spaceBetween: 20,//在slide之間設置距離（單位px）。
            mousewheel: true,
            pagination: {//分頁器
              el: '.swiper-pagination',
              clickable: true,
            },
            //設置點擊箭頭
            navigation: {
              nextEl: '.swiper-button-next',
              prevEl: '.swiper-button-prev'
            },
            on: {
              // 那些年，那些坑--swiper loop：true引發綁定dom的click事件無效及解決方案
              click: function (res) {
                // 這裏有坑
                // 需要注意的是：this 指向的是 swpier 實例，而不是當前的 vue， 因此藉助 vm，來調用 methods 裏的方法
                // console.log(this); // -> Swiper
                // 當前活動塊的索引，與activeIndex不同的是，在loop模式下不會將 複製的塊 的數量計算在內。
                const realIndex = this.realIndex;
                //點擊查看詳情
                console.log(realIndex)
                console.log(vm.index)
              },
              slideChangeTransitionEnd: function () {
                // console.log(this.realIndex)
                // console.log(vm.index)
                // 獲取當前索引的真實位置
                vm.index = this.realIndex;
              }
            },
          })
        })

      },
    },
  }
</script>

<style scoped>

  .swiper-slide {
    width: 100%;
    height: 210px;
    line-height: 500px;
    font-size: 50px;
    display: flex;
  }

  .swiper-slide > img {
    width: 375px;
    height: 100%;
  }
</style>

參考：https://www.cnblogs.com/lizhao123/p/10268394.html