swiper版本:6.3.5

解决:

1.main中

// navigation是箭头的重点
import {
  Swiper as SwiperClass,
  Pagination,
  Navigation,
  Mousewheel,
  Autoplay
} from 'swiper/swiper.esm'
SwiperClass.use([Pagination, Mousewheel, Autoplay, Navigation])

2.vue中(箭头放在轮播外面)

<swiper class="swiper-container" ref="mySwiper" :options="swiperOption">
    <swiper-slide v-for="item in imgUrl" :key="item">
        {{item}}
    </swiper-slide>
    <div class="swiper-button-prev" slot="button-prev"></div>
    <div class="swiper-button-next" slot="button-next"></div>
</swiper>
swiperOption: {
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev'
    }
}

done!

Logo

Vue社区为您提供最前沿的新闻资讯和知识内容

更多推荐