vue3使用swiper轮播图循环失败

Question

这个轮播图使用v-for循环遍历，逐个输出图片，但是没形成我想要的轮播图效果，我想要一个正常的轮播图，左右两边有按钮可以点击下一张的，然后下方需要指示点，每3秒自动切换一次

<template>
    <div>
        <swiper :options="swiperOptions">
            <swiper-slide v-for="(item, index) in swiperList" :key="index">
                <p>{{ item.title }}</p>
                <img :src="item.img" alt="" width="200px">
            </swiper-slide>
        </swiper>
    </div>
</template>

<script setup lang="ts">

import { Swiper, SwiperSlide } from "swiper/vue"
import axios from 'axios'
import { ref, reactive, onMounted } from 'vue'
const swiperList = ref([])

//组件加载后，调用服务器端接口
onMounted(() => {
    axios.get("http://localhost:3000/banners").then((res) => {
        console.log(res);
        swiperList.value = res.data;
    });
})

const swiperOptions = {
    //轮播图的配置参数
    slidesPerView: 1, //每个页面显示的图片数量
    spaceBetween: 10, //图片之间的间隔
    navigation: {
        nextEl: ".swiper-button-next", //下一页按钮的样式选择器
        prevEl: ".swiper-button-prev" //上一页按钮的样式选择器
    }
}
</script>

<style lang="scss" scoped></style>

Answer 1

<template>
  <div class="swiper-container">
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    <swiper  :autoplay="{ delay:5000, disableOnInteraction: false }"
      :navigation="{ nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' }" :pagination="{ clickable: true }"
      :options="swiperOptions" class="swiper">
      <swiper-slide v-for="(item, index) in swiperList" :key="index">
        <p>{{ item.title }}</p>
        <img :src="item.img" alt="" width="200px">
      </swiper-slide>
      <div class="swiper-pagination"></div>
    </swiper>
  </div>
</template>

<script setup lang="ts">
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Autoplay, Pagination, Navigation } from 'swiper/modules';
import SwiperCore from 'swiper';
import 'swiper/scss';
import 'swiper/scss/navigation';
import 'swiper/scss/pagination';
import axios from "axios";
import { ref, onMounted } from "vue";

const swiperList = ref([]);
SwiperCore.use([Navigation, Pagination, Autoplay]);
onMounted(() => {
  axios.get("http://localhost:3000/banners").then((res) => {
    swiperList.value = res.data;
  });
});
const swiperOptions = {
  slidesPerView: 1,
  spaceBetween: 10,
  loop: true, // 开启循环模式
};
</script>

<style lang="scss" scoped>
.swiper-container {
  width: 100%;
  margin: 0 auto;
}
.swiper {
  width: 100%;
  height: 300px;
  /* 根据需要调整高度 */
}
.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

这个代码你试试，有问题私信我