【vue3+ts】使用swiper插件

【vue3+ts】使用swiper插件

安装依赖，此文章依赖版本为9.3.2

先上代码

template部分

<swiper :modules="modules" :navigation="true" :loop="true" :autoplay="{ delay: 2000, disableOnInteraction: false}" :pagination="{clickable: true}">
        <swiper-slide>
          <img src="../../../../assets/images/rizhao_img/partyBuilding/hy.png" alt="">
        </swiper-slide>
        <swiper-slide>
          <img src="../../../../assets/images/rizhao_img/partyBuilding/hy.png" alt="">
        </swiper-slide>
        <swiper-slide>
          <img src="../../../../assets/images/rizhao_img/partyBuilding/hy.png" alt="">
        </swiper-slide>
        <swiper-slide>
          <img src="../../../../assets/images/rizhao_img/partyBuilding/hy.png" alt="">
        </swiper-slide>
      </swiper>

script部分

import { Swiper, SwiperSlide } from 'swiper/vue';
import { Pagination } from 'swiper';
import { Navigation, Autoplay } from 'swiper';
import 'swiper/css/pagination';
import 'swiper/css/navigation';
import 'swiper/css';
const modules = ref([Navigation, Pagination, Autoplay]);

参数介绍

modules

loop:是否循环播放
autoplay：是否自动轮播，delay为间隔的毫秒数；disableOnInteraction默认true，手动触发后是否重新启动自动播放
navigation： 定义左右切换箭头
pagination: 是否可以点击圆点指示器切换轮播

未完待续。。。