swiper 11 vue

官网： 刷卡器Vue.js组件 (swiperjs.com)

api增加属性Swiper API (swiperjs.com)

vue3 setup写法略有不同：以下是vue3 setup写法

html 增加了autoplay  并且设定为1秒 和 鼠标悬浮暂停

        <div class="swiper-area">          <!-- delay 运行速度  -->          <!-- pauseOnMouseEnter: true 鼠标悬浮暂停 -->          <swiper            :autoplay="{              delay: 1000,              pauseOnMouseEnter: true            }"            :modules="[Autoplay]"            :slides-per-view="1"            loop            :space-between="50"            @swiper="onSwiper"            @slideChange="onSlideChange"            ref="mySwiper"          >            <swiper-slide>              <img class="swiper-img" src="@/assets/img/imgs/carouselImg2.jpg" alt="" />            </swiper-slide>            <swiper-slide>              <img class="swiper-img" src="@/assets/img/imgs/carouselImg3.jpg" alt="" />            </swiper-slide>            <swiper-slide>              <img class="swiper-img" src="@/assets/img/imgs/carouselImg4.jpg" alt="" />            </swiper-slide>            <swiper-slide>              <img class="swiper-img" src="@/assets/img/imgs/carouselImg5.jpg" alt="" />            </swiper-slide>          </swiper>        </div>

js

import { Autoplay, Navigation, Pagination, Scrollbar, A11y } from "swiper/modules";