vue3使用swiper8

安装swiper， 默认8.x版本

?

1	npm i swiper

 

页面引入：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71

<template>   <swiper     :autoplay="swiper_options.autoplay"     :loop="swiper_options.loop"     :speed="swiper_options.speed"     :pagination="swiper_options.pagination"     :navigation="swiper_options.navigation"     :spaceBetween="swiper_options.spaceBetween"     :coverflowEffect="swiper_options.coverflowEffect"     :centeredSlides="swiper_options.centeredSlides"     :slidesPerView="swiper_options.slidesPerView"     class="swiper"     effect="coverflow" >     <swiper-slide     ><img class="my_swiper_imgs" src="../../../assets/1.jpg" alt=""     /></swiper-slide>     <swiper-slide     ><img class="my_swiper_imgs" src="../../../assets/2.jpg" alt=""     /></swiper-slide>     <swiper-slide     ><img class="my_swiper_imgs" src="../../../assets/3.jpg" alt=""     /></swiper-slide> </swiper> </template> <script> import { reactive } from "vue"; // 使用swiper的compositon API import SwiperCore, { Autoplay, Pagination, EffectCoverflow, Navigation } from "swiper"; import { Swiper, SwiperSlide } from "swiper/vue"; import 'swiper/css'; import 'swiper/css/pagination'; import 'swiper/css/navigation'; SwiperCore.use([Autoplay, Pagination, EffectCoverflow, Navigation]); export default {   name: "MySwiper",   components: {     Swiper,     SwiperSlide,   },   setup() {     // swiper相关配置属性放在swiper_options这个变量里     let swiper_options = reactive({       autoplay: {         disableOnInteraction: false, // 鼠标滑动后继续自动播放         delay: 4000, //4秒切换一次       },       speed: 500, //切换过渡速度       loop: true,       slidesPerView: "auto", //解决最后一张切换到第一张中间的空白       centeredSlides: true, //设置slide居中       spaceBetween: 20,       coverflowEffect: {         // rotate: 0, //slide做3d旋转时Y轴的旋转角度。默认50。         stretch: 50, //每个slide之间的拉伸值（距离），越大slide靠得越紧。 默认0。         depth: 100, //slide的位置深度。值越大z轴距离越远，看起来越小。 默认100。         modifier: 1, //depth和rotate和stretch的倍率，相当于            depth*modifier、rotate*modifier、stretch*modifier，值越大这三个参数的效果越明显。默认1。         // slideShadows: false, //开启slide阴影。默认 true。       },       navigation: {         nextElRef: ".swiper-button-next",         prevElRef: ".swiper-button-prev",       },       pagination: {         clickable: true,       },     });     // 将swiper_options返回给模板中的swiper组件使用     return { swiper_options };   }, };