2 0 0

Stately主题轮播图滚动时出现空白的问题解决方案

黄黄
351 2

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

111

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

利用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

最新回复 ( 2 )
  • Geticer
    0 沙发
    试试Transform: unset?
  • 黄黄
    1 藤椅
    Geticer 试试Transform: unset?
    自定义代码加入,好像确实可以!
    .carousel-item-next,
    .active.carousel-item-right,
    .carousel-item-prev,
    .active.carousel-item-left {
      transform: unset;
    }
  • 游客
    藤椅

    您需要登录后才可以回帖

    立即登录 立即注册