在Bootstrap 4 Beta中淡化Carousel的过渡 [英] Fade transition for Carousel in Bootstrap 4 Beta
本文介绍了在Bootstrap 4 Beta中淡化Carousel的过渡的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试修改新的Bootstrap 4 Beta Carousel以使用淡入淡出而不是滑动动作从幻灯片转换为幻灯片，并使用CSS。我无法让它发挥作用。我不确定是否需要特殊的Javascript通话。
I'm trying to modify the new Bootstrap 4 Beta Carousel to transition from slide to slide with fade rather than a sliding action, and using CSS. I cannot get it to work. I'm not sure if a special Javascript call is required.
请在此处查看Codepen：
Please see Codepen here:
.carousel-fade .carousel-inner .item {
-webkit-transition-property: opacity;
transition-property: opacity;
}
.carousel-fade .carousel-inner .item,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
opacity: 0;
}
.carousel-fade .carousel-inner .active,
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
opacity: 1;
}
.carousel-fade .carousel-inner .next,
.carousel-fade .carousel-inner .prev,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
left: 0;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.carousel-fade .carousel-control {
z-index: 2;
}
html,
body,
.carousel,
.carousel-inner,
.carousel-inner .item {
height: 100%;
}
<div class="container">
<div id="carousel" class="carousel slide carousel-fade" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid" src="https://tuniverse.io/wp-content/uploads/2016/12/boss-tu-2-06.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="https://tuniverse.io/wp-content/uploads/2016/12/boss-tu-2-08.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="https://tuniverse.io/wp-content/uploads/2016/12/boss-tu-2-09.jpg" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carousel" 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" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- end carousel -->
</div>
<!-- end container -->
谢谢
推荐答案
这是一个适用于Bootstrap 4 Beta的解决方案。
Here's a solution that works with Bootstrap 4 Beta.
.carousel-fade .carousel-item {
display: block;
position: relative;
opacity: 0;
transition: opacity .75s ease-in-out;
}
.row {
width: 100%;
}
.carousel-fade .carousel-item.active {
opacity: 1;
display: block;
}
.row {
width: 100%;
}
.carousel {
position: relative;
top: 0;
left: 0;
background-color: lightskyblue;
}
.carousel-inner {
background-color: pink;
height: 100%;
}
.carousel-item {
background-color: yellow;
opacity: .5; /*Added clone in this line*/
}
a.carousel-control-next:link, a.carousel-control-prev:link {
background-color: transparent;
text-decoration: none;
opacity: .5;
}
a.carousel-control-next:hover, a.carousel-control-prev:hover {
background-color: transparent;
text-decoration: none;
opacity: 1;
}
.carousel-control-next-icon, .carousel-control-prev-icon {
position:relative;
background-image: none;
}
.carousel-control-next-icon:before {
top:0;
left:-5px;
padding-right:10px;
}
.carousel-control-prev-icon:before {
top:0;
left:-5px;
padding-right:10px;
}
.sidebar {
background-color: #e1e1e1;
}
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
</head>
<div class="container">
<div class="row">
<div class="col-lg-8">
<div id="carousel" class="carousel carousel-fade" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block w-100" src="https://i.imgur.com/FmtTabr.jpg" alt="First slide">
</div> <!-- close carousel-item 1 -->
<div class="carousel-item" style="position: absolute; top:0px; width: 100% ; height: 100%">
<img class="d-block w-100" src="https://i.imgur.com/UioJ4ix.jpg" alt="Second slide">
</div> <!-- close carousel-item 2 -->
<div class="carousel-item" style="position: absolute; top:0px; width: 100% ; height: 100%">
<img class="d-block w-100" src="https://i.imgur.com/UkPZYcB.jpg" alt="Third slide">
</div> <!-- close carousel-item 3 -->
</div> <!-- close carousel-inner -->
<a class="carousel-control-prev" href="#carousel" 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" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div> <!-- close carousel -->
<table class="table table-bordered mt-3">
<thead class="thead-default">
<tr>
<th colspan="2" class="text-center">Table head</th>
</tr>
</thead>
<tbody>
<tr>
<td>content</td>
<td>content</td>
</tr>
<tr>
<td>content</td>
<td>content</td>
</tr>
</tbody>
</table>
</div> <!-- end col-lg-8 -->
<div class="col-lg-4 sidebar">
<p>Sidebar</p>
</div> <!-- close sidebar -->
</div> <!-- close row -->
</div> <!-- close container -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
这篇关于在Bootstrap 4 Beta中淡化Carousel的过渡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
