我的轮播“下一步”按钮不起作用，并且轮播没有自动过渡

Question

我正在尝试编码轮播，但下一个/上一个按钮和自动幻灯片都无法正常工作

<div class="container-fluid">

    <div class="row">
      <div class="col-md-12">
        <!--Slideshow starts here-->
        <div class="bd-example">
           <div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">

            <ol class="carousel-indicators">
              <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
              <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
              <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
            </ol>

            <div class="carousel-inner">

              <div class="carousel-item active">
                <img src="/Users/catherinekorren/Desktop/WebDesign/i6_local/cause/bootstrap/images/dj.gif" class="d-block w-100" alt="DJ">
                <div class="carousel-caption d-none d-md-block">
                  <h5>Music Can Change Lives</h5>
                  <p>Whether You're A DJ</p>
                </div>
              </div>

              <div class="carousel-item">
                <img src="/Users/catherinekorren/Desktop/WebDesign/i6_local/cause/bootstrap/images/crowd.gif" class="d-block w-100" alt="Black Hole 1">
                <div class="carousel-caption d-none d-md-block">
                  <h5>Or a Listener</h5>
                  <p>Anywhere Across the World</p>
                </div>
              </div>

              <div class="carousel-item">
                <img src="img/blackhole.jpg" class="d-block w-100" alt="Black Hole 3">
                <div class="carousel-caption d-none d-md-block">
                  <h5>Third Hole</h5>
                  <p>This is another artist...</p>
                </div>
              </div>

            </div>

            <a class="carousel-control-prev" href="#carouselExampleCaptions" 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="#carouselExampleCaptions" role="button" data-slide="next">
              <span class="carousel-control-next-icon" aria-hidden="true"></span>
              <span class="sr-only">Next</span>
            </a>

          </div>
        </div>
       <!-- Slideshow ends here -->
      </div>
    </div>

Answer 1

希望此代码可能有所帮助。您可以更改时间间隔。