ブートストラップ4：カルーセルフェードトランジションが動作しない

Question

以下のコードは、ブートストラップバージョン3を使用すると完全に正常に動作します。ただし、ブートストラップ4ベータ2にアップグレードしてからフェードトランジションは機能しません。それはちょうど次の画像ではなく、スムーズな移行にジャンプ：

HTML

<div id="carousel1" class="carousel fade" data-ride="carousel"> 
    <ol class="carousel-indicators"> 
     <li data-target="#carousel1" data-slide-to="0" class="active"></li> 
     <li data-target="#carousel1" data-slide-to="1"></li> 
     <li data-target="#carousel1" data-slide-to="2"></li> 
    </ol> 

    <div class="carousel-inner" role="listbox"> 
     <div class="item active"><img src="images/a.jpg" alt="First slide image" class="center-block"> 
     <div class="carousel-caption"> 
      <h3>First slide Heading</h3> 
      <p>First slide Caption</p> 
     </div> 
     </div> 
     <div class="item"><img src="images/b.jpg" alt="Second slide image" class="center-block"> 
     <div class="carousel-caption"> 
      <h3>Second slide Heading</h3> 
      <p>Second slide Caption</p> 
     </div> 
     </div> 
     <div class="item"><img src="images/c.jpg" alt="Third slide image" class="center-block"> 
     <div class="carousel-caption"> 
      <h3>Third slide Heading</h3> 
      <p>Third slide Caption</p> 
     </div> 
     </div> 
    </div> 

    <a class="left carousel-control" href="#carousel1" role="button" data-slide="prev"> 
     <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
     <span class="sr-only">Previous</span> 
    </a> 
    <a class="right carousel-control" href="#carousel1" role="button" data-slide="next"> 
     <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
     <span class="sr-only">Next</span> 
    </a> 
</div> 

CSS

.carousel.fade { 
    opacity: 1; 
} 
.carousel.fade .item { 
    transition: opacity ease-out .7s; 
    left: 0; 
    opacity: 0; /* hide all slides */ 
    top: 0; 
    position: absolute; 
    width: 100%; 
    display: block; 
} 
.carousel.fade .item:first-child { 
    top: auto; 
    opacity: 1; /* show first slide */ 
    position: relative; 
} 
.carousel.fade .item.active { 
    opacity: 1; 
} 

JS周り探し

$(function(){ 
    $('.carousel').carousel({ 
     interval: 6000 
    }); 
}); 

、あったようです最近のブートストラップのアップグレードに関するいくつかの問題、どんな助けもありがたいです。

Answer 1

すでに気が付いているように、ブートストラップ4では多くのことが変更されています。以下の解決方法で私が取り上げたアプローチを説明しましょう。

• .fadeはデフォルトのブートストラップ.fadeクラスに干渉しない.carousel-fadeに名前が変更されました。
• .itemは、カルーセル項目のBootsrap 4の名前であるため、.carousel-itemに改名されました。
• スライドの位置が原因​​フェージング効果により今絶対あるので、私はスライド容器の高さを維持するために、また、スライド・アイテムの位置の世話をする.carousel-itemに.carousel-innerまた.embed-responsive-itemに.embed-responsive embed-responsive-16by9クラスを追加しました。 （あなたが他のアスペクト比で画像を使用したい場合は、あなたが.embed-responsive-16by9クラスを変更する必要がありますデフォルトはhereを記載されています。。）

だからこれは私のアプローチのようになります。

.carousel.carousel-fade .carousel-item { 
 
    display: block; 
 
    opacity: 0; 
 
    transition: opacity ease-out .7s; 
 
} 
 

 
.carousel.carousel-fade .carousel-item.active { 
 
    opacity: 1 !important; 
 
}

<div id="carousel-fade" class="carousel carousel-fade" data-ride="carousel" data-interval="2000"> 
 
    <ol class="carousel-indicators"> 
 
     <li data-target="#carousel-fade" data-slide-to="0" class="active"></li> 
 
     <li data-target="#carousel-fade" data-slide-to="1"></li> 
 
     <li data-target="#carousel-fade" data-slide-to="2"></li> 
 
    </ol> 
 

 
    <div class="carousel-inner embed-responsive embed-responsive-16by9" role="listbox"> 
 
     <div class="carousel-item embed-responsive-item active"> 
 
     <img src="http://via.placeholder.com/1600x900/483D8B/ffffff?text=Slide%201" alt="First slide image" class="img-fluid"> 
 
     <div class="carousel-caption"> 
 
      <h3>First slide Heading</h3> 
 
      <p>First slide Caption</p> 
 
     </div> 
 
     </div> 
 

 
     <div class="carousel-item embed-responsive-item"> 
 
     <img src="http://via.placeholder.com/1600x900/9400D3/ffffff?text=Slide%202" alt="Second slide image" class="img-fluid"> 
 
     <div class="carousel-caption"> 
 
      <h3>Second slide Heading</h3> 
 
      <p>Second slide Caption</p> 
 
     </div> 
 
     </div> 
 

 
     <div class="carousel-item embed-responsive-item"> 
 
     <img src="http://via.placeholder.com/1600x900/FF1493/ffffff?text=Slide%203" alt="Third slide image" class="img-fluid"> 
 
     <div class="carousel-caption"> 
 
      <h3>Third slide Heading</h3> 
 
      <p>Third slide Caption</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    <a class="carousel-control-prev" href="#carousel-fade" 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-fade" role="button" data-slide="next"> 
 
     <span class="carousel-control-next-icon" aria-hidden="true"></span> 
 
     <span class="sr-only">Next</span> 
 
    </a> 
 
</div> 
 

 

 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>

さらに2つのノート：

• また、 data-interval属性の.carouselを介してnge間隔に設定します。
• カルーセルコントロールのマークアップも、うわーブートストラップ4に