我正在嘗試使用Fade效果製作旋轉木馬引導程序,但我對此效果並不那麼專業。我想是這樣的CSS代碼將Fade效果轉換爲Bootstrap 3旋轉木馬
opacity: 0;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
,但我不知道如何在我的代碼應用它。
這是我的旋轉木馬:
<div id="myCarousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="" contenteditable="false"></li>
<li data-target="#myCarousel" data-slide-to="1" class="active" contenteditable="false"></li>
<li data-target="#myCarousel" data-slide-to="2" class="" contenteditable="false"></li>
</ol>
<div class="carousel-inner">
<div class="item" style="">
<img src="images/slide/slide-1.jpg" alt="" class="" width="3000px" height="800px">
<div class="carousel-caption">
<h4 class="">First Slide Title</h4>
<p class="">
Description for First Slide, this First Slide.
</p>
</div>
</div>
<div class="item active">
<img src="images/slide/slide-2.jpg" alt="" class="" width="3000px" height="800px">
<div class="carousel-caption">
<h4 class="">Second Slide Title</h4>
<p class="">
Description for Second Slide, this is Second Slide.
</p>
</div>
</div>
<div class="item" style="">
<img src="images/slide/slide-3.jpg" alt="" class="" width="3000px" height="800px">
<div class="carousel-caption">
<h4 class="">Third Slide Title</h4>
<p class="">
Description for Third Slide, this is Third Slide.
</p>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
,這是我custom.css:
.carousel-inner > .item > img, .carousel-inner > .item > a > img {
display: block;
height: 800px;
min-width: 100%;
width: 100%;
max-width: 100%;
line-height: 1;
}
我不是蘇但您可能必須將其放在旋轉木馬或淡化項目的父級上。 –