在Bootstrap 4 Beta中淡化Carousel的过渡

时间：2017-09-26 16:03:38

标签： javascript css carousel bootstrap-4

我试图修改新的Bootstrap 4 Beta Carousel，使用淡入淡出而不是滑动动作，使用CSS从幻灯片转换为幻灯片。我无法让它发挥作用。我不确定是否需要进行特殊的Javascript调用。

请在此处查看Codepen：

＆＃13;
＆＃13; 
.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%;
}
＆＃13; 
<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 -->
＆＃13;
＆＃13;
＆＃13;

由于

2 个答案:

答案 0 :(得分：2)

这是一个适用于Bootstrap 4 Beta的解决方案。

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

这是一个适用于 Bootstrap 4 Stable Released

的解决方案

从这个主题开始：https://startbootstrap.com/template-overviews/full-slider/

＆＃13;
＆＃13; 
#image1 {
    background-image: url('http://via.placeholder.com/1440x813');
}

#image2 {
    background-image: url('http://via.placeholder.com/1440x813');
}

#image3 {
    background-image: url('http://via.placeholder.com/1440x813');
}

.carousel-item {
    height: 100vh;
    min-height: 300px;
    background-image: no-repeat center center scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.carousel.fade {
    opacity: 1;
}

.carousel.fade .carousel-item {
    -moz-transition: opacity ease-in-out .7s;
    -o-transition: opacity ease-in-out .7s;
    -webkit-transition: opacity ease-in-out .7s;
    transition: opacity ease-in-out .7s;
    left: 0 !important;
    opacity: 0;
    top: 0;
    position: absolute;
    width: 100%;
    display: block !important;
    z-index: 1;
}

.carousel.fade .carousel-item:first-child {
    top: auto;
    position: relative;
}

.carousel.fade .carousel-item.active {
    opacity: 1;
    -moz-transition: opacity ease-in-out .7s;
    -o-transition: opacity ease-in-out .7s;
    -webkit-transition: opacity ease-in-out .7s;
    transition: opacity ease-in-out .7s;
    z-index: 2;
}

.carousel-control-next,
.carousel-control-prev {
	z-index: 10;
}
＆＃13; 
<!DOCTYPE html>
<html lang="en">
<head>

	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<meta name="description" content="">
	<meta name="author" content="">

	<title>Full Slider - Start Bootstrap Template</title>

	<!-- Bootstrap core CSS -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
	<!-- Custom styles for this template -->
	<link href="css/full-slider.css" rel="stylesheet">

</head>

<body>

	<!-- Navigation -->
	<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
		<div class="container">
			<a class="navbar-brand" href="#">Start Bootstrap</a>
			<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
				<span class="navbar-toggler-icon"></span>
			</button>
			<div class="collapse navbar-collapse" id="navbarResponsive">
				<ul class="navbar-nav ml-auto">
					<li class="nav-item active">
						<a class="nav-link" href="#">Home
							<span class="sr-only">(current)</span>
						</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#">About</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#">Services</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#">Contact</a>
					</li>
				</ul>
			</div>
		</div>
	</nav>

	<header>
		<div id="carouselExampleIndicators" class="carousel fade" data-ride="carousel">
			<ol class="carousel-indicators">
				<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
				<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
				<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
			</ol>
			<div class="carousel-inner" role="listbox">
				<div id="image1" class="carousel-item active">
					<div class="carousel-caption d-none d-md-block">
						<h3>First Slide</h3>
						<p>This is a description for the first slide.</p>
					</div>
				</div><!-- #image1 -->
				<div id="image2" class="carousel-item">
					<div class="carousel-caption d-none d-md-block">
						<h3>Second Slide</h3>
						<p>This is a description for the second slide.</p>
					</div>
				</div><!-- #image2 -->
				<div id="image3" class="carousel-item">
					<div class="carousel-caption d-none d-md-block">
						<h3>Third Slide</h3>
						<p>This is a description for the third slide.</p>
					</div>
				</div><!-- #image3 -->
			</div><!-- .carousel-inner -->
			<a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
				<span class="carousel-control-next-icon" aria-hidden="true"></span>
				<span class="sr-only">Next</span>
			</a>
		</div><!-- carouselExampleIndicators -->
	</header>

	<!-- Page Content -->
	<section class="py-5">
		<div class="container">
			<h1>Full Slider by Start Bootstrap</h1>
			<p>The background images for the slider are set directly in the HTML using inline CSS. The rest of the styles for this template are contained within the
				<code>full-slider.css</code> file.
			</p>
		</div>
	</section>

	<!-- Footer -->
	<footer class="py-5 bg-dark">
		<div class="container">
			<p class="m-0 text-center text-white">Copyright &copy; Your Website 2018</p>
		</div>
		<!-- /.container -->
	</footer>

	<!-- Bootstrap core JavaScript -->
	<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.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

</body>

</html>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题