vue3-carousel@^0.2.6滑动轮播时左侧出现空白如何修复？

可行修复方案 #

• 覆盖组件默认内边距
  该版本的carousel__viewport容器默认带有padding-left样式，是导致左侧空白的核心原因。添加自定义CSS覆盖：

  .carousel__viewport {
    padding-left: 0 !important;
  }
  

• 确保轮播项宽度占满容器
  若轮播项未设置100%宽度，滑动时易出现空白区域，可强制设置：

  .carousel__slide {
    width: 100% !important;
    margin: 0;
  }
  

• 校验per-page属性配置
  确认组件的per-page值与实际需要显示的轮播项数量匹配，避免因数量不匹配引发的偏移错误：

  <carousel :per-page="1">
    <!-- 轮播项内容 -->
  </carousel>
  

• 升级组件版本
  ^{0.2.6版本存在已知的布局偏移bug，升级到}0.3.0及以上的稳定版本，可直接修复该问题并获得更多功能优化。

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