本人用的是"swiper": "^6.3.0",
现在轮播图配置更加友好
<template>
<swiper
:autoplay="swiper_options.autoplay"
:loop="swiper_options.loop"
:speed="swiper_options.speed"
:pagination="swiper_options.pagination"
>
<swiper-slide v-for="(item, index) in props.data" :key="index">
<img :src="item.pic" alt="" />
</swiper-slide>
</swiper>
</template>
<script setup>
import { defineComponent, defineProps, reactive } from "vue";
import { Swiper, SwiperSlide } from "swiper/vue";
import SwiperCore, { Autoplay, Pagination } from "swiper";
// 引入样式
import "swiper/swiper.scss";
import "swiper/components/pagination/pagination.scss";
// 官网就是这么写的
SwiperCore.use([Autoplay, Pagination]);
// 引入两个组件
defineComponent({
components: {
Swiper,
SwiperSlide,
},
});
// 接受来自父组件的值
let props = defineProps({
data: Array,
});
// 轮播图的相关配置
let swiper_options = reactive({
autoplay: {
delay: 3000,
disableOnInteraction: false,
},
loop: true,
speed: 500,
pagination: {
clickable: true,
},
});
</script>
<style lang="scss" scoped>
.swiper-wrapper {
img {
width: 100%;
height: 300px;
}
}
</style>