vue3中实现Swiper轮播图

<script lang="ts" setup>
// 引入swiper组件
import { Swiper, SwiperSlide } from "swiper/vue";
import { ref } from "vue";
import { getCompanyNameList } from "@/api/auth";
import { ElMessage } from "element-plus";
// 引入swiper样式（按需导入）
import "swiper/css";
import "swiper/css/pagination"; // 轮播图底面的小圆点
import "swiper/css/navigation"; // 轮播图两边的左右箭头
import "swiper/css/scrollbar"; // 轮播图的滚动条

// 引入swiper核心和所需模块
import { Autoplay, Pagination, Navigation, Scrollbar } from "swiper";
// Scrollbar
const modules = [Autoplay, Pagination, Navigation];
const bgColor = ref([
  "background-color: #fff9c4",
  "background-color: #b3e5fc",
  "background-color: #ffebee",
  "background-color: #bfc",
  "background-color: skyblue",
]);
const listData = ref([]);
const getDetailsList = async () => {
  const { data } = await getCompanyNameList();
  if (data.length > 0) {
    data.forEach((element: { bgColor: string }, i: number) => {
      element.bgColor = bgColor.value[i];
    });
    listData.value = data;
  } else {
    ElMessage({
      message: "暂无数据",
      type: "warning",
    });
  }
};
getDetailsList();
</script>

```html
<template>
  <div class="home">
    <!-- :loop="true" -->
    <!-- :scrollbar="{ draggable: true }"  -->
    <swiper
      :modules="modules"
      :slides-per-view="5"
      :direction="'vertical'"
      :autoplay="{ delay: 3000, disableOnInteraction: false }"
      :pagination="{ clickable: true }"
    >
      <!-- loop可循环轮播，autoplay可自动播放 -->
      <swiper-slide v-for="item in listData" :style="item.bgColor">{{
        item.companyname
      }}</swiper-slide>
    </swiper>
  </div>
</template>

最后别忘了 npm install swiper 安装一下依赖