VUE3中使用swiper

官方API文档：Swiper API

1.安装最新版本的swiper，我当前的版本是11

npm install swiper@latest

2.在对应的项目文件中引入swiper，swiper样式以及需要用到的模块，对应的modules可在官方API文档中查看。需要注意的是引入了某个modules后要引入对应的css样式，比如我引用了Autoplay和EffectFade，那就需要同时引入对应的css样式，否则轮播图可能会出现不轮播等问题。

import {Autoplay,EffectFade} from 'swiper/modules';
import {Swiper,SwiperSlide} from 'swiper/vue';

// Import Swiper styles
import 'swiper/css';
import 'swiper/css/autoplay';
import 'swiper/css/effect-fade';  //effect为fade时必须引入，否则可能出现只切换一次就不自动切换的情况

export default defineComponent({
		components: {
			Swiper,
			SwiperSlide
		},
		name: "HomePage",
		data() {
			return {
				autoPlaySet: {
					delay: 2000,
					stopOnLastSlide: false,
					disableOnInteraction: true,
				},
				modules: [Autoplay, EffectFade],
			};
		},
	
	})

3.

<swiper  :autoplay="autoPlaySet" effect="fade" class="swiperBox"  :modules="modules" speed="1000">
    <swiper-slide>
        <p>1</p>
    </swiper-slide>
    <swiper-slide>
        <p>2</p>
    </swiper-slide>
    <swiper-slide>
        <p>3</p>
    </swiper-slide>
</swiper>