ブートストラップv4のためにカルーセルが機能しない

Question

私はウェブプロジェクトに取り組んでいます。カルーセルの問題に直面しています。クリックしないと自動的に次のイメージに移動しません。以下の私のコードです：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
    <div id="carousel-testimonial" class="carousel slide" data-ride="carousel"> 
 
    <ol class="carousel-indicators"> 
 
     <li data-target="#carousel-testimonial" data-slide-to="0" class="active"></li> 
 
     <li data-target="#carousel-testimonial" data-slide-to="1"></li> 
 
     <li data-target="#carousel-testimonial" data-slide-to="2"></li> 
 
    </ol> 
 
    <div class="carousel-inner" role="listbox"> 
 
     <div class="carousel-item active text-center"> 
 
      <img src="images/client-01.jpg" alt="testimonial" class="center-block"> 
 
      <div class="testimonial-caption"> 
 
       <h2>Danial</h2> 
 
       <h4><span>Sr. Software Engineer, </span>Blue Gyms</h4> 
 
       <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et olore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip."</p> 
 
      </div> 
 
     </div> 
 
     <div class="carousel-item text-center"> 
 
      <img src="images/client-02.jpg" alt="testimonial" class="center-block"> 
 
      <div class="testimonial-caption"> 
 
       <h2>Rauls Pole</h2> 
 
       <h4><span>Marketing Manager, </span>Risco</h4> 
 
       <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et olore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip."</p> 
 
      </div> 
 
     </div> 
 
     <div class="carousel-item text-center"> 
 
      <img src="images/client-03.jpg" alt="testimonial" class="center-block"> 
 
      <div class="testimonial-caption"> 
 
       <h2>Jack</h2> 
 
       <h4><span>Sr. Software Engineer, </span>Blue Gyms</h4> 
 
       <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et olore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip."</p> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

Answer 1

あなたのカルーセルにボタンを含めるのを忘れていました。これらは、次の例の最後にあるaリンクです。さらに、プロジェクトにjQueryとBootstrap 4 JavsScriptを含めましたか？必要な行はすべてhereです。

<div id="carousel-testimonial" class="carousel slide" data-ride="carousel"> 
    <ol class="carousel-indicators"> 
     <li data-target="#carousel-testimonial" data-slide-to="0" class="active"></li> 
     <li data-target="#carousel-testimonial" data-slide-to="1"></li> 
     <li data-target="#carousel-testimonial" data-slide-to="2"></li> 
    </ol> 
    <div class="carousel-inner" role="listbox"> 
     <div class="carousel-item active text-center"> 
      <img src="images/client-01.jpg" alt="testimonial" class="center-block"> 
      <div class="testimonial-caption"> 
       <h2>Danial</h2> 
       <h4><span>Sr. Software Engineer, </span>Blue Gyms</h4> 
       <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore 
        et olore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut 
        aliquip."</p> 
      </div> 
     </div> 
     <div class="carousel-item text-center"> 
      <img src="images/client-02.jpg" alt="testimonial" class="center-block"> 
      <div class="testimonial-caption"> 
       <h2>Rauls Pole</h2> 
       <h4><span>Marketing Manager, </span>Risco</h4> 
       <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore 
        et olore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut 
        aliquip."</p> 
      </div> 
     </div> 
     <div class="carousel-item text-center"> 
      <img src="images/client-03.jpg" alt="testimonial" class="center-block"> 
      <div class="testimonial-caption"> 
       <h2>Jack</h2> 
       <h4><span>Sr. Software Engineer, </span>Blue Gyms</h4> 
       <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore 
        et olore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut 
        aliquip."</p> 
      </div> 
     </div> 
     <a class="carousel-control-prev" href="#carousel-testimonial" 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-testimonial" role="button" data-slide="next"> 
      <span class="carousel-control-next-icon" aria-hidden="true"></span> 
      <span class="sr-only">Next</span> 
     </a> 
    </div> 
</div>