swiper6.1.2版本

image.png

<template>
<div style="height:800px;margin:80px;">
  <swiper ref="mySwiper" :options="swiperOptions">
    <swiper-slide v-for="(item,i) in slideData" :key="item.id" class="swiper-slide">
       <img :src="item.img" alt="" :class="{img_active:img_activeIntext===i}" :data-url="item.src" :data-index="i" :data-isMap="item.isMap">
     </swiper-slide>
  </swiper>
   <!-- 左右箭头 -->
    <div class="swiper-button-next" slot="button-next" @click="next"></div>
    <div class="swiper-button-prev" slot="button-prev" @click="prev"></div>
</div>
  
</template>

<script>
export default {
  name: "carrousel",
  data() {
    return{
        swiperOptions: {
           direction: 'vertical',
          //  loop: true,
          slidesPerView: 3,
          slidesPerGroup: 3,
          loopFillGroupWithBlank: true,
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          },
        slideData: [],
        img_activeIntext: 0,
        on: {
          click: (swiper, e) => {
          //获取额外绑定的vue自定义属性
            const dataset = e.target.dataset
            this.goToLink(dataset)
          }
        }
        },
        
      }
    },

  computed:{
    swiper() {
      return this.$refs.mySwiper.$swiper
    }
  },
  methods:{
    prev(){
      console.log(123)
      this.swiper.slidePrev();
    },
    next(){
      this.swiper.slideNext();
    },
goToLink(item) {
      console.log(item)
      this.currentSrc = item.src
      this.img_activeIntext = item.index
      this.rightInfoShow = item.isMap
    },
  }
}
</script>

<style lang="scss">
.swiper-slide {
  width: 200px;
  height: 200px;
  border: 1px solid #f40;
}
.swiper-button-prev, .swiper-button-next{
    color: #fff;
    background: #5e5f5e;
    position:absolute;
    left:50px;
}
.swiper-button-prev{
  top:20px;
  transform: rotate(-90deg);
}
.swiper-button-next{
  bottom:20px;
  transform: rotate(-90deg);
}
</style>