的淡入淡出过渡

的淡入淡出过渡

关注
发信
关注(28)粉丝(399)

Bootstrap 4 Beta 中 Carousel 的淡入淡出过渡

本文介绍了Bootstrap 4 Beta 中 Carousel 的淡入淡出过渡的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试修改新的 Bootstrap 4 Beta Carousel 以使用淡入淡出而不是滑动操作从幻灯片过渡到幻灯片，并使用 CSS.我无法让它工作.我不确定是否需要特殊的 Javascript 调用.

请在此处查看 Codepen:

.carousel-fade .carousel-inner .item {-webkit-transition-property:不透明度；过渡属性:不透明度；}.carousel-fade .carousel-inner .item,.carousel-fade .carousel-inner .active.left,.carousel-fade .carousel-inner .active.right {不透明度:0；}.carousel-fade .carousel-inner .active,.carousel-fade .carousel-inner .next.left,.carousel-fade .carousel-inner .prev.right {不透明度:1；}.carousel-fade .carousel-inner .next,.carousel-fade .carousel-inner .prev,.carousel-fade .carousel-inner .active.left,.carousel-fade .carousel-inner .active.right {左:0；-webkit-transform: translate3d(0, 0, 0);变换:translate3d(0, 0, 0);}.carousel-fade .carousel-control {z-索引:2；}html,身体，.旋转木马，.carousel-内，.carousel-inner .item {高度:100%；}
<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="第一张幻灯片">
<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="第二张幻灯片">

<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="第三张幻灯片">

<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">以前的</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">下一步</span></a>

<!-- 结束旋转木马-->

<!-- 结束容器-->

谢谢

解决方案

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

.carousel-fade .carousel-item {显示:块；位置:相对；不透明度:0；过渡:不透明度 0.75 秒缓入缓出；}.排 {宽度:100%；}.carousel-fade .carousel-item.active {不透明度:1；显示:块；}.排 {宽度:100%；}.carousel {位置:相对；顶部:0；左:0；背景颜色:lightskyblue；}.carousel-内{背景颜色:粉红色；高度:100%；}.carousel-item {背景颜色:黄色；不透明度:0.5；/*在这一行添加了克隆*/}a.carousel-control-next:link, a.carousel-control-prev:link {背景色:透明；文字装饰:无；不透明度:0.5；}a.carousel-control-next:hover, a.carousel-control-prev:hover {背景色:透明；文字装饰:无；不透明度:1；}.carousel-control-next-icon, .carousel-control-prev-icon {位置:相对；背景图像:无；}.carousel-control-next-icon:before {顶部:0；左:-5px；填充右:10px;}.carousel-control-prev-icon:before {顶部:0；左:-5px；填充右:10px;}.侧边栏{背景颜色:#e1e1e1；}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css"><div class="容器"><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="第一张幻灯片">

<!-- 关闭 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="第二张幻灯片">

<!-- 关闭 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="第三张幻灯片">

<!-- 关闭轮播 - 项目 3 -->

<!-- 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">以前的</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">下一步</span></a>

<!-- 关闭轮播 --><table class="table table-bordered mt-3"><thead class="thead-default"><tr><th colspan="2" class="text-center">表头</th></tr></thead><tr><td>内容</td><td>内容</td></tr><tr><td>内容</td><td>内容</td></tr></tbody>

<!-- 结束 col-lg-8 --><div class="col-lg-4 侧边栏"><p>侧边栏</p>

<!-- 关闭侧边栏-->

<!-- 关闭行-->

<!-- 关闭容器--><script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5Kkn"cross/脚本><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqKaISfwNz4M" crossorigin="anonymous"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4N.;

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

解决方案

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 的淡入淡出过渡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

08-12 09:19
Powered by LMLPHP ©2024 的淡入淡出过渡 0.044464