twitter-bootstrap Bootstrap 4：轮播淡入淡出过渡不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/47796906/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-10-22 01:11:05 来源:igfitidea点击:
Bootstrap 4: Carousel Fade Transition Not Working
提问by tjj88
The below code worked perfectly fine for me using Bootstrap version 3. However, since upgrading to Bootstrap 4 Beta2 the fade transition does not work. It just jumps to the next image rather than a smooth transition:
下面的代码对我使用 Bootstrap 版本 3 非常好。但是，由于升级到 Bootstrap 4 Beta2，淡入淡出过渡不起作用。它只是跳转到下一个图像而不是平滑过渡：
HTML
HTML
<div id="carousel1" class="carousel fade" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel1" data-slide-to="0" class="active"></li>
<li data-target="#carousel1" data-slide-to="1"></li>
<li data-target="#carousel1" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active"><img src="images/a.jpg" alt="First slide image" class="center-block">
<div class="carousel-caption">
<h3>First slide Heading</h3>
<p>First slide Caption</p>
</div>
</div>
<div class="item"><img src="images/b.jpg" alt="Second slide image" class="center-block">
<div class="carousel-caption">
<h3>Second slide Heading</h3>
<p>Second slide Caption</p>
</div>
</div>
<div class="item"><img src="images/c.jpg" alt="Third slide image" class="center-block">
<div class="carousel-caption">
<h3>Third slide Heading</h3>
<p>Third slide Caption</p>
</div>
</div>
</div>
<a class="left carousel-control" href="#carousel1" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel1" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
CSS
CSS
.carousel.fade {
opacity: 1;
}
.carousel.fade .item {
transition: opacity ease-out .7s;
left: 0;
opacity: 0; /* hide all slides */
top: 0;
position: absolute;
width: 100%;
display: block;
}
.carousel.fade .item:first-child {
top: auto;
opacity: 1; /* show first slide */
position: relative;
}
.carousel.fade .item.active {
opacity: 1;
}
JS
JS
$(function(){
$('.carousel').carousel({
interval: 6000
});
});
Looking around and it seems that there has been a few issues with the recent bootstrap upgrade, any help would be appreciated.
环顾四周，最近的引导程序升级似乎存在一些问题，任何帮助将不胜感激。
回答by dferenc
As you have already noticed, quite a lot of things have been changed in Bootstrap 4. Let me walk you through the approach I took with the solution below.
正如您已经注意到的，Bootstrap 4 中发生了很多变化。让我带您了解我在下面的解决方案中采用的方法。
.fadewas renamed to.carousel-fadenot to interfere with the default Bootstrap.fadeclass..itemwas renamed to.carousel-item, since that is the name in Bootsrap 4 for carousel items.- As the positioning of the slides is absolute now because of the fading effect, I added
.embed-responsive embed-responsive-16by9classes to.carousel-innerand also.embed-responsive-itemto.carousel-itemto preserve the height of the slide container and also to take care of the positioning of the slide items. (In case you want to use images with other aspect ratios, you should change the.embed-responsive-16by9class. Defaults are listed here.)
.fade重命名为.carousel-fade不干扰默认的 Bootstrap.fade类。.item已重命名为.carousel-item，因为这是 Bootsrap 4 中轮播项目的名称。- 由于渐变效果，现在幻灯片的定位是绝对的，我添加了
.embed-responsive embed-responsive-16by9类 to.carousel-inner和.embed-responsive-itemto.carousel-item来保留幻灯片容器的高度，并照顾幻灯片项目的定位。（如果您想使用具有其他纵横比的图像，您应该更改.embed-responsive-16by9类。此处列出了默认值。）
So this would be my approach:
所以这将是我的方法：
.carousel.carousel-fade .carousel-item {
display: block;
opacity: 0;
transition: opacity ease-out .7s;
}
.carousel.carousel-fade .carousel-item.active {
opacity: 1 !important;
}<div id="carousel-fade" class="carousel carousel-fade" data-ride="carousel" data-interval="2000">
<ol class="carousel-indicators">
<li data-target="#carousel-fade" data-slide-to="0" class="active"></li>
<li data-target="#carousel-fade" data-slide-to="1"></li>
<li data-target="#carousel-fade" data-slide-to="2"></li>
</ol>
<div class="carousel-inner embed-responsive embed-responsive-16by9" role="listbox">
<div class="carousel-item embed-responsive-item active">
<img src="http://via.placeholder.com/1600x900/483D8B/ffffff?text=Slide%201" alt="First slide image" class="img-fluid">
<div class="carousel-caption">
<h3>First slide Heading</h3>
<p>First slide Caption</p>
</div>
</div>
<div class="carousel-item embed-responsive-item">
<img src="http://via.placeholder.com/1600x900/9400D3/ffffff?text=Slide%202" alt="Second slide image" class="img-fluid">
<div class="carousel-caption">
<h3>Second slide Heading</h3>
<p>Second slide Caption</p>
</div>
</div>
<div class="carousel-item embed-responsive-item">
<img src="http://via.placeholder.com/1600x900/FF1493/ffffff?text=Slide%203" alt="Third slide image" class="img-fluid">
<div class="carousel-caption">
<h3>Third slide Heading</h3>
<p>Third slide Caption</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carousel-fade" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carousel-fade" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>Two more notes:
另外两个注意事项：
- You can also set the change interval via the
data-intervalattribute of the.carousel. - The markup of the carousel controls have also been changed in Bootstrap 4.
- 您还可以通过 的
data-interval属性设置更改间隔.carousel。 - Bootstrap 4 中轮播控件的标记也已更改。
