vue3.x使用swiper实现卡片轮播

<div class="swiper-container home_swiper">
?? ?<div class="swiper-wrapper">
?? ??? ?<div class="swiper-slide" v-for="(item,index) in aImages" :key="index">
?? ??? ??? ?<img :src="http://9i0i.com/pic.php?p=item.picUrl" alt="" />
?? ??? ?</div>
?? ?</div>
</div>
import {
?? ?ref,
?? ?nextTick
} from 'vue';
import Swiper, {
?? ?Autoplay,
?? ?EffectCoverflow
} from "swiper";
Swiper.use([Autoplay, EffectCoverflow]);
import "swiper/swiper.scss";
export default {
?? ?setup() {
?? ??? ?const aImages = ref([]);
?? ??? ?const fInitSwiper = () => {
?? ??? ??? ?new Swiper(".home_swiper", {
?? ??? ??? ??? ?//循环
?? ??? ??? ??? ?loop: true,
?? ??? ??? ??? ?//每张播放时长3秒，自动播放
?? ??? ??? ??? ?spaceBetween: 16,
?? ??? ??? ??? ?// 切换效果?
?? ??? ??? ??? ?effect: "coverflow",
?? ??? ??? ??? ?// 该选项给Swiper用户提供小小的贴心应用，设置为true时，鼠标覆盖Swiper时指针会变成手掌形状，拖动时指针会变成抓手形状。
?? ??? ??? ??? ?grabCursor: true,
?? ??? ??? ??? ?// 设定为true时，active slide会居中，而不是默认状态下的居左。
?? ??? ??? ??? ?centeredSlides: true,
?? ??? ??? ??? ?// 设置slider容器能够同时显示的slides数量(carousel模式)。
?? ??? ??? ??? ?slidesPerView: 1.32,
?? ??? ??? ??? ?// 启动动态检查器(OB/观众/观看者)，当改变swiper的样式（例如隐藏/显示）或者修改swiper的子元素时，自动初始化swiper。默认false，不开启，可以使用update()方法更新。
?? ??? ??? ??? ?observer: true,
?? ??? ??? ??? ?observeParents: true,
?? ??? ??? ??? ?observeSlideChildren: true,
?? ??? ??? ??? ?// 自动切换
?? ??? ??? ??? ?autoplay: {
?? ??? ??? ??? ??? ?// 自动切换的时间间隔
?? ??? ??? ??? ??? ?delay: 3000,
?? ??? ??? ??? ??? ?// 如果设置为true，当切换到最后一个slide时停止自动切换
?? ??? ??? ??? ??? ?stopOnLastSlide: false,
?? ??? ??? ??? ??? ?// 用户操作swiper之后，是否禁止autoplay。默认为true：停止
?? ??? ??? ??? ??? ?disableOnInteraction: false,
?? ??? ??? ??? ?},
?? ??? ??? ??? ?// 类似于苹果将多首歌曲的封面以3D界面的形式显示出来的方式
?? ??? ??? ??? ?coverflowEffect: {
?? ??? ??? ??? ??? ?// slide做3d旋转时Y轴的旋转角度
?? ??? ??? ??? ??? ?rotate: 0,
?? ??? ??? ??? ??? ?// 每个slide之间的拉伸值，越大slide靠得越紧。5.3.6 后可使用%百分比
?? ??? ??? ??? ??? ?stretch: -70,
?? ??? ??? ??? ??? ?// slide的位置深度。值越大z轴距离越远，看起来越小。
?? ??? ??? ??? ??? ?depth: 500,
?? ??? ??? ??? ??? ?// depth和rotate和stretch的倍率，相当于depth*modifier、rotate*modifier、stretch*modifier，值越大这三个参数的效果越明显。
?? ??? ??? ??? ??? ?modifier: 1,
?? ??? ??? ??? ??? ?// 是否开启slide阴影
?? ??? ??? ??? ??? ?slideShadows: true,
?? ??? ??? ??? ?},
?? ??? ??? ?});
?? ??? ?};
?? ??? ?return {
?? ??? ??? ?aImages?
?? ??? ?}
?? ?}
}