vue使用swiper

vue使用swiper

前言

项目中使用vue3和ant design vue，有个需求需要用到轮播图，并且需要鼠标左右滑动，所以放弃了ant design vue中的走马灯，换用swiper

一、下载swiper

npm i swiper

项目中使用的版本是 ^11.0.4

二、引用

import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/css/bundle';
import { Pagination, A11y, Autoplay } from 'swiper/modules';
const modules = [Pagination, A11y, Autoplay];

三、html片段

<swiper
	:modules="modules"
	:slides-per-view="1"
	:autoplay="{ delay: 5000, pauseOnMouseEnter: true }"
	:pagination="{ clickable: true }"
	:loop="true"
	class="mySwiper"
>
	<swiper-slide>1</swiper-slide>
	<swiper-slide>2</swiper-slide>
	<swiper-slide>3</swiper-slide>
</swiper>

或者

<swiper
	:modules="modules"
	:slides-per-view="1"
	:autoplay="{ delay: 5000, pauseOnMouseEnter: true }"
	:pagination="{ clickable: true }"
	:loop="true"
	class="mySwiper"
	v-if="announcementList.length"
>
	<swiper-slide v-for="item in announcementList" :key="item.id">
		{{ item.content }}
	</swiper-slide>
</swiper>

总结

更多用法参考swiper官网 swiper文档参数