jdscomms jdscomms - 3 years ago 323
CSS Question

Fade transition for Carousel in Bootstrap 4 Beta

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.

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 -->





Thanks

Answer Source

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;
}
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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download