ブートストラップ4カルーセルコントロールが動作しない

これまでにこの問題は発生していませんでしたが、何らかの理由で私のカルーセルコントロールが基本BS4カルーセルのために機能しません。興味深いことに、インジケータはクリックされたときに機能していますか？ブートストラップ4カルーセルコントロールが動作しない

<div class="col-md-6"> 
    <div id="carouselExampleIndicators" class="carousel slide" 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"> 
      <div class="carousel-item active"> 
       <div class="embed-container"> 
        <iframe src="https://www.youtube.com/embed/..." frameborder="0" allowfullscreen></iframe> 
       </div> 
      </div> 
      <div class="carousel-item"> 
       <div class="embed-container"> 
        <iframe src="https://www.youtube.com/embed/..." frameborder="0" allowfullscreen></iframe> 
       </div> 
      </div> 
      <div class="carousel-item"> 
       <div class="embed-container"> 
        <iframe src="https://www.youtube.com/embed/..." frameborder="0" allowfullscreen></iframe> 
       </div> 
      </div> 
     </div> 
     <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> 
</div>

出典

2017-12-14 Sandra Willford

popper.jsを追加すると役立ちます。

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script> 
 
</head> 
 
<body> 
 
    
 
<div class="col-md-6"> 
 
    <div id="carouselExampleIndicators" class="carousel slide" 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"> 
 
      <div class="carousel-item active"> 
 
       <div class="embed-container"> 
 
        <iframe src="https://www.youtube.com/embed/..." frameborder="0" allowfullscreen></iframe> 
 
       </div> 
 
      </div> 
 
      <div class="carousel-item"> 
 
       <div class="embed-container"> 
 
        <iframe src="https://www.youtube.com/embed/..." frameborder="0" allowfullscreen></iframe> 
 
       </div> 
 
      </div> 
 
      <div class="carousel-item"> 
 
       <div class="embed-container"> 
 
        <iframe src="https://www.youtube.com/embed/..." frameborder="0" allowfullscreen></iframe> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     <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> 
 
</div> 
 

 
</body> 
 
</html>

出典

2017-12-14 19:03:41

は、ブートストラップ4 'にitem'は使用されなくなりました。ドキュメントによれば 'カルーセル項目 'になりました。 –

updated答えを今すぐ –

ブートストラップ4カルーセルコントロールが動作しない

答えて

関連する問題