vue之轮播图

<template>
  <div class="swiper-container" ref="cur">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="(list, index) in skuImageList" :key="list.id">
        <img :src="list.imgUrl" :class="{ active: index == currentindex }" @click="changeindex(index)" />
      </div>
    </div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
  </div>
</template>

<script>
import Swiper from "swiper";
export default {
  name: "ImageList",
  props: ["skuImageList"],
  data() {
    return {
      currentindex: 0,
    };
  },

  watch: {
    skuImageList() {
      this.$nextTick(() => {
        var mySwiper = new Swiper(this.$refs.cur, {
          slidesPerView: 3,
          slidesPerGroup: 3,
          // 如果需要前进后退按钮
          navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
          },
        });
      });
    },
  },
  methods: {
    changeindex(index) {
      this.currentindex = index;
      this.$bus.$emit("sendindex", index);
    },
  },
};
</script>

效果：