如何将Vue3-carousel的水平轮播修改为垂直方向轮播

vue3-carousel 的垂直模式不是只传一个方向参数就能生效，必须配合对应配置和样式覆盖，具体步骤如下：

核心组件配置 #

给 Carousel 组件传入以下必填参数，缺任何一个都会 fallback 到水平展示：

• direction="vertical"：声明轮播方向为垂直，注意传字符串值，不要传布尔值
• :itemsToShow="n"：明确设置单屏展示的轮播项数量n，垂直模式下组件不会自动计算高度，缺省该参数滑动逻辑会直接失效
• verticalScroll：开启垂直方向的滚动、拖拽响应，默认只响应水平方向手势
• 必须引入组件官方基础样式，否则所有方向相关的布局逻辑都不会生效

基础组件写法参考：

<template>
  <Carousel
    class="vertical-carousel"
    direction="vertical"
    :itemsToShow="3"
    :mouseDrag="true"
    verticalScroll
    :pagination="true"
    :navigation="true"
  >
    <Slide v-for="item in 6" :key="item">
      <div class="carousel-item">轮播项{{ item }}</div>
    </Slide>
  </Carousel>
</template>

<script setup>
import { Carousel, Slide } from 'vue3-carousel';
// 必须引入基础样式
import 'vue3-carousel/dist/carousel.css';
</script>

必填样式覆盖 #

组件默认样式完全按水平场景编写，垂直模式下不会自动切换布局属性，必须手动覆盖以下样式：

/* 轮播容器必须设置固定高度，高度值按业务需求调整 */
.vertical-carousel {
  height: 400px;
}
/* 轮播轨道改为纵向排布 */
.vertical-carousel .carousel__track {
  flex-direction: column;
  height: 100%;
}
/* 轮播项宽度撑满容器，高度和单屏展示数量匹配 */
.vertical-carousel .carousel__slide {
  width: 100% !important;
  /* 除数和itemsToShow的数值保持一致 */
  height: calc(100% / 3);
}
/* 分页器调整到右侧纵向排布，避免遮挡内容 */
.vertical-carousel .carousel__pagination {
  right: 12px;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  flex-direction: column;
  gap: 6px;
}
/* 上下导航按钮调整到容器上下居中位置 */
.vertical-carousel .carousel__prev {
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
}
.vertical-carousel .carousel__next {
  bottom: 12px;
  top: auto;
  left: 50%;
  transform: translateX(-50%);
}

常见不生效原因排查 #

• 未给轮播容器设置固定高度，组件无法计算垂直偏移量，自动回退到水平布局
• 漏引入vue3-carousel/dist/carousel.css基础样式，组件布局类名完全不生效
• itemsToShow传值为0或未传，组件无法计算单个轮播项高度，所有轮播项横向挤在一行
• 自定义样式覆盖了.carousel__track的transform属性，垂直模式下组件靠translateY实现位移，不要给轨道添加translateX相关属性

内容的提问来源于stack exchange，提问作者TechDev