Vue3轮播图的实现：vue3-carousel的使用和配置

一、安装 vue3-carousel

官方文档：Getting started | Vue3-carousel

npm install vue3-carousel

二、引入

在Vue3项目中添加，这是一个简单的轮播demo：

<script setup>
// If you are using PurgeCSS, make sure to whitelist the carousel CSS classes
import 'vue3-carousel/carousel.css'
import { Carousel, Slide, Pagination, Navigation } from 'vue3-carousel'
 
const carouselConfig = {
  itemsToShow: 2.5,
  wrapAround: true,
  autoplay:"2000"
}
</script>
 
<template>
  <Carousel v-bind="carouselConfig" autoplay="2000">
    <Slide v-for="slide in 10" :key="slide">
      <div class="carousel__item">{{ slide }}</div>
    </Slide>
 
    <template #addons>
      <Navigation />
      <Pagination />
    </template>
  </Carousel>
</template>

• Carousel：轮播容器组件，用于包裹和显示轮播的内容。
• Slide：每一页或每一项内容的容器组件。
• Pagination：分页组件，显示分页指示器。
• Navigation：导航组件，提供上一页和下一页按钮。
  - itemsToShow: 2.5：表示每次显示 2.5
  项幻灯片，通常用于创建一种“部分显示”效果，让部分幻灯片在视图中显示，以便用户可以预览下一项内容。
• wrapAround: true：启用循环模式，这意味着当用户滚动到最后一项时，轮播会跳转回第一项，形成一个无限循环的效果。
• autoplay：2000:每间隔2s幻灯片自动播放，设置0为禁止自动播放。

更多参数设置请查询官网

三、轮播全局样式修改

我是直接在项目main.js中引入main.css添加对应的样式：

:root {
  /* 这是轮番图样式 */

  --vc-pgn-width: 10px !important; /* 分页按钮宽度 */
  --vc-pgn-height: 6px; /* 分页按钮高度 */
  --vc-pgn-margin: 8px 10px; /* 分页按钮边距 */
  --vc-pgn-border-radius: 4px !important; /* 分页按钮边框半径 */
  --vc-pgn-background-color: rgba(146, 140, 140, 0.945) !important; /* 分页按钮背景颜色 */
  --vc-pgn-active-color: #fcf8f8 !important; /* 活动分页按钮颜色 */
}