javascript - 插入用于引导轮播的 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>

最佳答案

使用可选的options对象初始化轮播，并开始循环浏览各个项目。

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

大事记：

slide.bs.carousel调用slide实例方法时，将立即触发此事件。

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

关于javascript - 插入用于引导轮播的 handle ？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41291547/