本文共计880个字，预计阅读时长3.5分钟。

轮播图滚动时，图片不是连贯的。中间有一个空白。。

利用Chatgpt先找下思路。大概可能是JS\CSS\HTML的问题。

启动检修大法，停用部分资源，然后实时看页面效果。终于瞎猫碰到死耗子，停用view/css/bootstrap.css后，轮播图恢复正常了。

细查这个CSS的内容，逐一排查carousel相关的规则，终于发现导致轮播图空白的代码了。

在view/css/bootstrap.css文件中找到以下代码，大概5317行，删除之，就好了。

.carousel-item-next,
.active.carousel-item-right {
  transform: translateX(100%);
}

@supports (transform-style: preserve-3d) {
  .carousel-item-next,
  .active.carousel-item-right {
    transform: translate3d(100%, 0, 0);
  }
}

.carousel-item-prev,
.active.carousel-item-left {
  transform: translateX(-100%);
}

@supports (transform-style: preserve-3d) {
  .carousel-item-prev,
  .active.carousel-item-left {
    transform: translate3d(-100%, 0, 0);
  }
}

按作者的指点，不修改核心文件的修复方法

自定义代码中加入下面的代码就好了。

.carousel-item-next,
.active.carousel-item-right，
.carousel-item-prev,
.active.carousel-item-left {
  transform: unset;
}

TAGS Stately 轮播图