【发布时间】：2021-12-03 22:09:44
【问题描述】：
在Bootstrap上的轮播演示中，幻灯片是连接在一起的，并且清楚地“一起”移动，当我进入下一张/上一张幻灯片时，可以看到当前幻灯片过渡离开，而新幻灯片过渡进入。
但是，当我复制粘贴示例代码时，我的过渡非常不稳定，而不是第一张图片过渡消失，它只是消失了，下一张幻灯片过渡进入，每次轮播过渡时都会在页面上留下这个空白区域。
它为什么会这样，我该如何解决它
【问题讨论】：
标签： css bootstrap-4
【发布时间】：2021-12-03 22:09:44
【问题描述】：
这里可能存在许多问题。但是为了向您展示一个完整的工作副本以供参考，这里是轮播的 JSfiddle
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
https://jsfiddle.net/fatchild/j310af6n/13/
我要检查的事情...
- 我已经包含了所有相关的库，以便引导程序工作。 （参见 JSFiddle）
- 检查系统的不稳定是否归结为慢速系统。将您的代码移到 JSFiddle 之类的东西上并与我的比较。
- 一边尖叫一边摇晃电脑。
【讨论】：
-
从您的 JSFiddle 添加适当的库似乎已经成功了，但是我有一些自定义 CSS 来移动标题并使下一个/上一个图标在图像背景中更加可见，而且看起来这导致我的幻灯片在我的实际幻灯片之间有几乎 1 整张幻灯片的空白。所以基本上动画现在效果更好，但是有大量的空白。上周我已经厌倦了选项 3 可能 5 次。
-
不知道发生了什么，但是当我摆弄其他一些东西时，空白问题已经解决了......
-
有趣！也许尝试回溯，看看你改变了什么来修复它，我很想知道。 p.s.可能不是电脑在晃动；）
-
在尝试还原我脑海中浮现的几件事，并用空缓存重新加载页面后，看起来巨大的空白区域并没有回来。以下是一些关于可能导致它的猜测： 1 - 在它发生的阶段，我可能没有在测试时硬重新加载/页面 2 - 我将整个页面包裹在
<div class="container-fluid">但是当我尝试删除它时并且硬重新加载它似乎也没有带回空白 3 - 我清理了一些更无用的脚本来源（通过重新加载页面并注释掉一些链接） -
1 和 3 对我来说似乎最有可能。但至少它现在是固定的。不错！