vue3插件swiper的简单使用

安装

npm install swiper

引入

import {Swiper, SwiperSlide} from 'swiper/vue';
import 'swiper/css';

import 'swiper/css/pagination';
import 'swiper/css/navigation';
import {Autoplay, Navigation, Pagination} from 'swiper/modules';

export default {
	name: "PortalHome",
	components: {
		Swiper,
		SwiperSlide,
	},
	setup() {
		return {
			modules: [Autoplay, Pagination, Navigation],
			modules1: [Autoplay, Navigation],
		};
	},
	data() {
  }
}

使用

<swiper
    v-if="slideshowList.length"
    :autoplay="{ delay: 2500, disableOnInteraction: false, }"
    :centeredSlides="true"
    :loop="true"
    :modules="modules"
    :navigation="true"
    :observe-parents="true"
    :observer="true"
    :pagination="{ clickable: true, }"
    :slidePerView="1"
    :spaceBetween="30"
    class="mySwiper"
>
    <swiper-slide v-for="(item, index) in slideshowList" :key="index">
       <img :src="getUrl(item)" alt="" class="my-slide">
    </swiper-slide>
</swiper>