[英]How to build text-only fadein/fadeout carousel in JS (Bootstrap-like)?
[英]Bootstrap v4: text-only carousel only center text upon sliding completion (sticked to the top otherwise)
知道為什么該純文本輪播(Bootstrap v4)會將我的輪播項目文本粘貼在頂部,然后將其居中對齊,而不是直接正確地對齊項目的文本嗎?
<div id="myTextOnlyCarousel" class="carousel slide mt-5" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myTextOnlyCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myTextOnlyCarousel" data-slide-to="1"></li>
<li data-target="#myTextOnlyCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner bg-dark text-light rounded text-center d-flex h-100 align-items-center justify-content-center" style="min-height: 300px;">
<div class="carousel-item active">
<h1>This is AWESOME!</h1>
</div>
<div class="carousel-item">
<h1>This is freaking AMAZING!</h1>
</div>
<div class="carousel-item">
<h1>YEAHHH</h1>
</div>
</div>
<a class="carousel-control-prev" href="#myTextOnlyCarousel" 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="#myTextOnlyCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
好的,這是因為輪播項目類上的活動類才使文本在動畫中滑動。 因此,將其更改為展示廣告塊,然后添加從輪播中刪除彎曲部分。
.carousel-item .text{ display: flex; height: 100%!important; min-height: 300px; align-items: center; justify-content: center; } .carousel-item.active, .carousel-item-next, .carousel-item-prev{ display:block; }
<div id="myTextOnlyCarousel" class="carousel slide mt-5" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#myTextOnlyCarousel" data-slide-to="0" class="active"></li> <li data-target="#myTextOnlyCarousel" data-slide-to="1"></li> <li data-target="#myTextOnlyCarousel" data-slide-to="2"></li> </ol> <div class="carousel-inner bg-dark text-light rounded text-center h-100 " style="min-height: 300px;background: red;"> <div class="carousel-item active"> <div class="text"> <h1>This is AWESOME!</h1> </div> </div> <div class="carousel-item"> <div class="text"> <h1>This is freaking AMAZING!</h1> </div> </div> <div class="carousel-item"> <div class="text"> <h1>YEAHHH</h1> </div> </div> </div> <a class="carousel-control-prev" href="#myTextOnlyCarousel" 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="#myTextOnlyCarousel" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>
這是我的解決方案JSFiddle
我用wrapper
您的h1
。
我必須給出最小高度,因為沒有它,這些項目將停留在頂部。
.wrapper {
min-height:300px;
display: flex;
align-items: center;
justify-content: center;
}
並刪除了一些應用於.carousel-inner
div的flex類
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.