插入引導傳送帶的手柄？

Question

我試圖製作一個旋轉木馬，用bootstrap顯示文本感言。我在這裏包含了這個片段。我包括手柄，但他們沒有工作，所以我刪除它。請讓我知道問題是什麼。我包含了示例中給出的代碼。它在示例中起作用，但在我的頁面中插入相同的代碼時不起作用。

codepen

.carousel-content { 
 
    color: white; 
 
    align-items: center; 
 
    padding: 5%; 
 
} 
 
#text-carousel { 
 
    width: 100%; 
 
    height: 200px; 
 
    background-color: #0489B1; 
 
} 
 
#testimonials { 
 
    background-color: #0489B1; 
 
    color: white; 
 
    text-align: center; 
 
}

<div class="testimonials" id="testimonials"> 
 
    <div class="container"> 
 
    <div class="row text-center mt mb"> 
 
     <h1>- Testimonials -</h1> 
 
    </div> 
 
    <div id="text-carousel" class="carousel slide" data-ride="carousel"> 
 
     <!-- Wrapper for slides --> 
 
     <div class="row mt mb"> 
 
     <div class="col-xs-offset-3 col-xs-6"> 
 
      <div class="carousel-inner"> 
 
      <div class="item active"> 
 
       <div class="carousel-content"> 
 
       <div> 
 
        <p> 
 
        <i class="fa fa-quote-left" aria-hidden="true"></i> 
 
        Sapiente, ducimus, voluptas, mollitia voluptatibus nemo explicabo sit blanditiis laborum dolore illum fuga veniam quae expedita libero accusamus quas harum ex numquam necessitatibus provident deleniti tenetur iusto officiis recusandae corporis culpa quaerat? 
 
        <i class="fa fa-quote-right" aria-hidden="true"></i> 
 
        </p> 
 
       </div> 
 
       </div> 
 
      </div> 
 
      <div class="item"> 
 
       <div class="carousel-content"> 
 
       <div> 
 
        <p> 
 
        <i class="fa fa-quote-left" aria-hidden="true"></i> 
 
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, sint fuga temporibus nam saepe delectus expedita vitae magnam necessitatibus dolores tempore consequatur dicta cumque repellendus eligendi ducimus placeat! 
 
        <i class="fa fa-quote-right" aria-hidden="true"></i> 
 
        </p> 
 
       </div> 
 
       </div> 
 
      </div> 
 
      <div class="item"> 
 
       <div class="carousel-content"> 
 
       <div> 
 
        <p> 
 
        <i class="fa fa-quote-left" aria-hidden="true"></i> 
 
        Sapiente, ducimus, voluptas, mollitia voluptatibus nemo explicabo sit blanditiis laborum dolore illum fuga veniam quae expedita libero accusamus quas harum ex numquam necessitatibus provident deleniti tenetur iusto officiis recusandae corporis culpa quaerat? 
 
        <i class="fa fa-quote-right" aria-hidden="true"></i> 
 
        </p> 
 
       </div> 
 
       </div> 
 
      </div> 
 

 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

初始化轉盤帶有可選的選項對象，並開始通過項目循環。

$('#text-carousel').carousel({ 
    interval: 2000 
}); 

活動：立即

slide.bs.carousel此事件在滑實例方法被調用。

$('#text-carousel').on('slide.bs.carousel', function() { 
    console.log('SLIDE INVOKED') 
}) 

slid.bs.carousel當傳送帶完成其幻燈片切換時會觸發此事件。

$('#text-carousel').on('slid.bs.carousel', function() { 
    console.log('dededed12112') 
}) 

如果您正在使用V4，嘗試用3.7：

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js

Documentation