vue3中使用swiper实现轮播图

本人用的是"swiper": "^6.3.0",
现在轮播图配置更加友好
<template>
    <div style="width: 1160px;height: 484px">
    <swiper
            :autoplay="swiper_options.autoplay"
            :loop="swiper_options.loop"
            :speed="swiper_options.speed"
            :pagination="swiper_options.pagination"
            :spaceBetween="0"
    >
        <swiper-slide v-for="item in list" :key="item.index"><img :src="item.imgUrl" alt=""/></swiper-slide>
        <div class="swiper-button-prev" @click.stop="prevEl(item, index)" />
        <!--左箭头。如果放置在swiper外面，需要自定义样式。-->
        <div class="swiper-button-next" @click.stop="nextEl" />
        <!--右箭头。如果放置在swiper外面，需要自定义样式。-->

    </swiper>
    </div>
</template>
<script setup>
import {defineComponent, reactive, ref} from "vue";
import { Swiper, SwiperSlide } from "swiper/vue";
import SwiperCore, { Autoplay, Pagination } from "swiper";
// 引入样式
import "swiper/swiper.scss";
import "swiper/components/pagination/pagination.scss";
import axios from "axios";
// 官网就是这么写的
SwiperCore.use([Autoplay, Pagination]);
// 引入两个组件
defineComponent({
    components: {
        Swiper,
        SwiperSlide,
    },
});
// 接受来自父组件的值
// let props = defineProps({
//     data: Array,
// });
// 轮播图的相关配置
let swiper_options = reactive({
    autoplay: {
        delay: 1000,
        disableOnInteraction: false,
    },
    loop: true,
    speed: 500,
    pagination: {
        clickable: true,
    },
});
const list = ref([])

</script>

<style lang="scss" scoped>
.swiper-wrapper {
  img {
    width:   1160px;
    height: 484px;
  }
}
</style>