javascript - 插入 Bootstrap 轮播的 handle ？

Question

我尝试制作一个轮播来使用 Bootstrap 显示文本推荐。我已将片段包含在此处。我包括了 handle ，但它们不起作用，所以我把它拆掉了。请让我知道问题是什么。我包含了示例中给出的代码。它在示例中有效，但当我在页面中插入相同的代码时则无效。

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

使用 optional 对象初始化轮播并开始循环浏览元素。

$('#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