我正在使用全屏Bootstrap 4轮播。幻灯片不包含图片，但视频和字幕。
它出来很好但它确实有一个错误：因为所有幻灯片但活动的有display: none（一个Bootstrap 4 默认），所以幻灯片中的字幕延迟，如下所示。
html,body {
padding: 0;
margin: 0;
height: 100%;
}
.page-wrapper {
min-height: 100%;
}
#full_slider .carousel-item {
height: 100vh;
justify-content: center;
align-items: center;
}
#full_slider .carousel-item.active {
display: flex;
position: relative;
}
#full_slider video {
position: absolute;
left: 0;
top: 0;
width: 100vw;
height: auto;
z-index: -1;
}
#full_slider .video-caption {
max-width: 585px;
color: #fff;
}
#full_slider h3 {
font-weight: 900;
font-size: 96px;
text-shadow: 2px 1px 1px rgba(0, 0, 0 , 0.6)
}
#full_slider .allcases a {
color: #fff;
margin-top: auto;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div class="page-wrapper">
<div id="full_slider" class="carousel slide" data-ride="carousel" data-interval="false">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<video src="https://code-love.tk/video/koffee.mp4" autoplay loop muted></video>
<div class="video-caption">
<h3 class="capt text-boldest">All about us</h3>
<p class="allcases">
<a class="inherit" href="#"><a class="inherit" href="#">See more</a></a>
</p>
</div>
</div>
<div class="carousel-item">
<video src="https://code-love.tk/video/flamenco.mp4" autoplay loop muted></video>
<div class="video-caption">
<h3 class="capt text-boldest">Lorem ipsum dolor</h3>
<p class="allcases">
<a class="inherit" href="#">See more</a>
</p>
</div>
</div>
<div class="carousel-item">
<video src="https://code-love.tk/video/wittgenstein.mp4" autoplay loop muted></video>
<div class="video-caption">
<h3 class="capt text-boldest">Wittgenstein's philosophy</h3>
<p class="allcases">
<a class="inherit" href="#">See more</a>
</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#full_slider" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#full_slider" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>
我不能只将旋转木马项目的显示设置为阻止，因为这会破坏滑块。
我该怎么做？
答案 0 :(得分：1)
尝试添加CSS规则：
.carousel-item.active, .carousel-item-left, .carousel-item-right {
display: flex !important;
}
问题似乎来自于这样一个事实，即在动画期间，display: flex未设置在轮播项目容器上，但这是正确对齐孩子所必需的。
工作片段：
html,body {
padding: 0;
margin: 0;
height: 100%;
}
.page-wrapper {
min-height: 100%;
}
#full_slider .carousel-item {
height: 100vh;
justify-content: center;
align-items: center;
}
#full_slider .carousel-item.active {
display: flex;
position: relative;
}
#full_slider video {
position: absolute;
left: 0;
top: 0;
width: 100vw;
height: auto;
z-index: -1;
}
#full_slider .video-caption {
max-width: 585px;
color: #fff;
}
#full_slider h3 {
font-weight: 900;
font-size: 96px;
text-shadow: 2px 1px 1px rgba(0, 0, 0 , 0.6)
}
#full_slider .allcases a {
color: #fff;
margin-top: auto;
}
.carousel-item.active, .carousel-item-left, .carousel-item-right {
display: flex !important;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div class="page-wrapper">
<div id="full_slider" class="carousel slide" data-ride="carousel" data-interval="false">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<video src="https://code-love.tk/video/koffee.mp4" autoplay loop muted></video>
<div class="video-caption">
<h3 class="capt text-boldest">All about us</h3>
<p class="allcases">
<a class="inherit" href="#"><a class="inherit" href="#">See more</a></a>
</p>
</div>
</div>
<div class="carousel-item">
<video src="https://code-love.tk/video/flamenco.mp4" autoplay loop muted></video>
<div class="video-caption">
<h3 class="capt text-boldest">Lorem ipsum dolor</h3>
<p class="allcases">
<a class="inherit" href="#">See more</a>
</p>
</div>
</div>
<div class="carousel-item">
<video src="https://code-love.tk/video/wittgenstein.mp4" autoplay loop muted></video>
<div class="video-caption">
<h3 class="capt text-boldest">Wittgenstein's philosophy</h3>
<p class="allcases">
<a class="inherit" href="#">See more</a>
</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#full_slider" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#full_slider" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>