PrimeVue Carousel组件宽度逐张递减问题求助

问题描述 #

使用PrimeVue的Carousel组件时，第一张幻灯片宽度正常，但后续每张宽度逐渐缩小，已严格遵循官方文档配置仍未解决。网站实例：hydralux-74de0.web.app

代码片段 #

HTML部分 #

<Carousel :value="images" :numVisible="1" :numScroll="1">
    <template #item="slotProps">
      <div class="carousel-data">
         <img :src="slotProps.data.src" height="300">
      </div>
    </template>
</Carousel>

JavaScript部分 #

const images = ref([
    {src: new URL('../assets/img/sewage-system/01.jpeg', import.meta.url)},
    {src: new URL('../assets/img/sewage-system/02.jpeg', import.meta.url)},
    {src: new URL('../assets/img/sewage-system/03.jpeg', import.meta.url)},
    {src: new URL('../assets/img/sewage-system/04.jpeg', import.meta.url)},
    {src: new URL('../assets/img/sewage-system/05.jpeg', import.meta.url)},
]);

问题截图 #

排查与解决步骤 #

• 强制幻灯片容器占满宽度
  给.carousel-data添加100%宽度样式，确保每个幻灯片容器完全适配Carousel的可用宽度：

  .carousel-data {
    width: 100%;
  }
  

  同时给图片添加宽度自适应设置，避免图片尺寸影响容器布局：

  .carousel-data img {
    width: 100%;
    height: 300px;
    object-fit: cover; /* 可选，保持图片比例，避免拉伸变形 */
  }
  

• 确认父容器宽度明确
  检查Carousel所在的父容器是否有明确的宽度定义，避免父容器宽度不确定导致组件计算错误。例如给父容器添加：

  .carousel-wrapper {
    width: 100%;
    max-width: 1200px; /* 根据需求调整 */
  }
  

• 验证PrimeVue样式完整性
  确认已完整引入PrimeVue的基础样式与主题样式，避免缺失样式导致布局异常：

  import 'primevue/resources/primevue.min.css';
  import 'primevue/resources/themes/[你的主题]/theme.css';
  import 'primeicons/primeicons.css';
  

• 动态刷新组件尺寸
  如果是图片异步加载导致的尺寸计算偏差，可在图片加载完成后调用Carousel的refresh()方法：

  <Carousel ref="carouselRef" :value="images" :numVisible="1" :numScroll="1">
    <!-- 模板内容 -->
  </Carousel>
  

  const carouselRef = ref(null);
  // 遍历图片，加载完成后刷新组件
  images.value.forEach(item => {
    const img = new Image();
    img.src = item.src;
    img.onload = () => {
      carouselRef.value?.refresh();
    };
  });
  

内容的提问来源于stack exchange，提问作者Игорь