Vue3使用Swiper6实现轮播

1.对应的Swiper版本是6.7.0

2.在需要使用的vue导入swiper组件

// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from 'swiper/vue'
// import Swiper core and required modules
import SwiperCore, { Navigation, Virtual, Autoplay, Pagination, A11y, EffectFade } from 'swiper'
// Import Swiper styles
import 'swiper/swiper.scss'
import 'swiper/components/navigation/navigation.scss'
import 'swiper/components/pagination/pagination.scss'
import 'swiper/components/scrollbar/scrollbar.scss'

SwiperCore.use([Navigation, Virtual, Autoplay, Pagination, A11y, EffectFade])

3.引用swiper组件

  components: {
    Swiper,
    SwiperSlide
  },

4.与components同级添加setup

  setup () {
    return {
      modules: [Navigation, EffectFade, A11y],
    }
  },

 5.

        
          
            {{index}}