Vue3+ts 项目使用Swiper
Swiper官网：https://swiperjs.com/vue
npm 安装指定版本Swiper7.4.1：
npm i swiper@7.4.1
具体代码如下：
<template>
<div>
<Swiper
:modules="modules"
@swiper="onSwiper"
:slidesPerView="1"
:direction="'vertical'"
:autoplay="{ delay: 2500, disableOnInteraction: true }"
:loop="false"
:space-between="10"
effect="cards"
class="swiper_card"
>
<swiper-slide>Slide 1</swiper-slide>
<swiper-slide>Slide 2</swiper-slide>
<swiper-slide>Slide 3</swiper-slide>
<swiper-slide>Slide 4</swiper-slide>
<swiper-slide>Slide 5</swiper-slide>
<swiper-slide>Slide 6</swiper-slide>
</Swiper>
</div>
</template>
<script lang="ts" setup>
import { Navigation, Pagination, Scrollbar, A11y, EffectCards } from "swiper";
import { Swiper, SwiperSlide } from "swiper/vue";
import "swiper/css";
const modules = [Navigation, Pagination, Scrollbar, A11y, EffectCards];
const onSwiper = (swiper: any) => {
console.log(swiper);
};
</script>
<style scoped lang="scss">
.swiper_card {
height: 300px;
width: 300px;
}
.swiper-slide
{
height: 300px;
line-height: 100px;
font-size: 30px;
text-align: center;
background-color: pink;
}
.swiper::v-deep.swiper-pagination .swiper-pagination-bullet {
background: rgb(255, 255, 255);
}
.swiper::v-deep .swiper-pagination .swiper-pagination-bullet-active {
background: rgb(255, 255, 255);
}
</style>
//注释：
1.slidesPerView是number类型，用来控制一次可以显示几张轮播图，如果改为2.5，则可以一页显示两张半轮播图。
2.space-between用于控制每张轮播图之间的距离，值的类型为number，单位是px，不能同时对swiper的元素使用margin和该属性，否则会导致导航失效。
3.autoplay属性值为一个对象，用于控制自动轮播的时间和事件等，delay的值为毫秒数，disableOnInteraction默认为true，设为false后可以实现在用户交互（滑动）后不会禁用自动播放，轮播将在每次交互后重新启动。
4.pagination的属性值为一个对象，用于控制轮播图底侧的小圆点，clickable设为true时可以通过点击小圆点切换轮播图。
5.scrollbar属性值也是一个对象，用于显示轮播图的滚动条（如下图），draggable设为true可以使滚动条可拖动。
6.direction属性用来控制方向，:direction="'vertical'"为垂直方向。这里注意了，vertical一定要有两对引号包裹的，不管单引号在里还是外，否则不生效，加了这个参数后你会发现滚动轮播图时会散架，所以还要给swiper设置实高。
7.使用effect，必须先导入该效果后才可以调用，否则无效。
