1、代码展示 

<template>
    <swiper :modules="modules" :slides-per-view="1" :space-between="50" :loop="true"
        :autoplay="{ delay: 1000, disableOnInteraction: false }" navigation :pagination="{ clickable: true }"
        :scrollbar="{ draggable: true }" @swiper="onSwiper" @slideChange="onSlideChange">
        <swiper-slide v-for="item,index in imglist" :key="index"><img :src="item"></swiper-slide>
    </swiper>
</template>
<script setup>
// import Swiper core and required modules
import { Navigation, Pagination, Scrollbar, A11y, Autoplay } from 'swiper';

// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from 'swiper/vue';

// Import Swiper styles
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/scrollbar';

// Import Swiper styles

let data=defineProps({
    imglist:{
        default(){
            return {}
        },
        type:Array
    }
})

const onSwiper = (swiper) => {
    console.log(swiper);
};
const onSlideChange = () => {

};
const modules = [Autoplay, Pagination, Navigation, Scrollbar,A11y]

</script>

2、运行展示

3、参数

imglist规定组件传入的参数为图片数组 

4、功能

自动轮播，左右箭头，下边框显示，锚点显示