Bootstrap 4：传送带淡化转换不工作 [英] Bootstrap 4: Carousel Fade Transition Not Working
本文介绍了Bootstrap 4：传送带淡化转换不工作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
下面的代码在使用Bootstrap版本3时工作得非常好。但是，由于升级到Bootstrap 4 Beta2，淡入淡出过渡不起作用。它只是跳转到下一张图片，而不是平滑过渡：
HTML
< div id =carousel1class =carousel fadedata-ride =carousel>
< li data-target =＃carousel1data-slide-to =1>< / li>
< li data-target =＃carousel1data-slide-to =2>< / li>
< / ol>
< div class =carousel-innerrole =listbox>
< div class =item active>< img src =images / a.jpgalt =第一张幻灯片图片class =center-block>
< div class =carousel-caption>
< h3>第一张幻灯片标题< / h3>
< p>第一张幻灯片Caption< / p>
< / div>
< / div>
< div class =item>< img src =images / b.jpgalt =第二张幻灯片图片class =center-block>
< div class =carousel-caption>
< h3>第二张幻灯片标题< / h3>
< p>第二张幻灯片Caption< / p>
< / div>
< / div>
< div class =item>< img src =images / c.jpgalt =第三张幻灯片图片class =center-block>
< div class =carousel-caption>
< h3>第三张幻灯片标题< / h3>
< p>第三张幻灯片Caption< / p>
< / div>
< / div>
< / div>
< a class =left carousel-controlhref =＃carousel1role =buttondata-slide =prev>
< span class =glyphicon glyphicon-chevron-leftaria-hidden =true>< / span>
< span class =sr-only>上一个< / span>
< / a>
< a class =right carousel-controlhref =＃carousel1role =buttondata-slide =next>
< span class =glyphicon glyphicon-chevron-rightaria-hidden =true>< / span>
< span class =sr-only>下一步< / span>
< / a>
< / div>
CSS
.carousel.fade {
opacity：1;
}
.carousel.fade .item {
transition：opacity ease-out .7s;
剩下：0;
opacity：0; / *隐藏所有幻灯片* /
top：0;
位置：绝对;
宽度：100％;
display：block;
}
.carousel.fade .item：first-child {
top：auto;
opacity：1; / *显示第一张幻灯片* /
位置：相对;
}
.carousel.fade .item.active {
opacity：1;
JS
<$ p $（
interval：6000
}）;
}）（$。code> $（function（）{
$（'。carousel'）。 ;
环顾四周，似乎最近的bootstrap升级有几个问题，如果你已经注意到了，很多东西已经在Bootstrap 4中被改变了。让我给你发个贴吧通过我采用下面的解决方案。
-
.fade被重命名为.carousel-fade不会干扰默认的Bootstrap.fade类。
-
.item被重命名为.carousel-item，因为这是Bootsrap 4中传送带物品的名称。 - 由于幻灯片的定位现在是由于衰落效应，我添加了
.embed响应式嵌入响应-16by9类到.carousel-inner还有.embed-responsive-item到.carousel- item来保存幻灯片容器的高度，同时要小心滑动物品的定位。 （如果您想要使用其他宽高比的图像，您应该更改.embed-responsive-16by9类。默认值列在 here 。）
所以这是我的做法：
.carousel.carousel-淡入淡出.carousel-item {display：block;不透明度：0; transition：opacity ease-out .7s;}。carousel.carousel-fade .carousel-item.active {opacity：1！important;}
< div id =carousel-fadeclass =carousel carousel-fadedata-ride =carouseldata-interval =2000 > < ol class =carousel-indicators> < li data-target =＃carousel-fadedata-slide-to =0class =active>< / li> < li data-target =＃carousel-fadedata-slide-to =1>< / li> < li data-target =＃carousel-fadedata-slide-to =2>< / li> < /醇> < div class =carousel-inner embed-responsive embed-responsive-16by9role =listbox> < div class =carousel-item embed-responsive-item active> < img src =http://via.placeholder.com/1600x900/483D8B/ffffff?text=Slide%201alt =第一张幻灯片图片class =img-fluid> < div class =carousel-caption> < h3>第一张幻灯片标题< / h3> < p>第一张幻灯片标题< / p> < / DIV> < / DIV> < div class =carousel-item embed-responsive-item> < img src =http://via.placeholder.com/1600x900/9400D3/ffffff?text=Slide%202alt =第二张幻灯片图片class =img-fluid> < div class =carousel-caption> < h3>第二张幻灯片标题< / h3> < p>第二张幻灯片标题< / p> < / DIV> < / DIV> < div class =carousel-item embed-responsive-item> < img src =http://via.placeholder.com/1600x900/FF1493/ffffff?text=Slide%203alt =第三张幻灯片图片class =img-fluid> < div class =carousel-caption> < h3>第三张幻灯片标题< / h3> < p>第三张幻灯片标题< / p> < / DIV> < / DIV> < / DIV> < a class =carousel-control-prevhref =＃carousel-faderole =buttondata-slide =prev> < span class =carousel-control-prev-iconaria-hidden =true>< / span> < span class =sr-only>上一步< / span> < / A> < a class =carousel-control-nexthref =＃carousel-faderole =buttondata-slide =next> < span class =carousel-control-next-iconaria-hidden =true>< / span> < span class =sr-only>下一步< / span> < / a>< / div>< link href =https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css =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>
还有两个注意事项：
数据设置更改间隔属性。 .carousel 的间隔
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:
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
.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
$(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.
解决方案
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.
.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.)
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.
这篇关于Bootstrap 4：传送带淡化转换不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
