引导轮播不滑动

Question

我完全不明白为什么引导轮播代码对我完全不起作用。 很奇怪，我拿了bootstrap网站上的例子，只是定制了一些应该可以工作的小东西。 我认为这是 bootrstrap 或 jquery 版本的问题，但它们都是我发现的最后一个，所以我看不出问题出在哪里。 如果有人可以帮助我，请^^

#carouselReactions {
  margin-top: 25px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100%;
  height: auto;
}

#carousel-left-control {
  width: 5%;
  display: flex;
  justify-content: center;
  align-items: center;
}

#carousel-text {
  width: 50%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#carousel-text h3 {
    color: #0C0C0D;
}

.carousel-inner, .carousel-item {
  position: relative;
  text-align: center;
}

#carousel-right-control {
  width: 5%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.carousel-indicators {
  margin-top: 15px;
  padding: 0;
  float: none;
  position: relative;
}
.carousel-control-prev, .carousel-control-next {
  position: relative;
}
.carousel-control-next, .carousel-control-prev {
  width: 100%;
  height: 100%;
}
.carousel-control-prev-icon, .carousel-control-next-icon {
  height: 50%;
  width: 40%;
}

<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" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div id="carouselReactions" class="carousel slide" data-ride="carousel">
  <div id="carousel-left-control">
    <a class="carousel-control-prev" href="#carouselReactions" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
  </div>
  <div id="carousel-text">
    <div class="carousel-inner">
      <div class="carousel-item active">
        <h3>« First quote »</h3>
        <img src="img/logo_quote1.png">
        <p>QuoteAuthor</p>
      </div>
      <div class="carousel-item">
        <h3>Second Quote</h3>
        <img src="img/logo_quote2.png">
        <p>QuoteAuthor2</p>
      </div>
      <div class="carousel-item">
        <h3>Third Quote</h3>
        <img src="img/logo_quote3.png">
        <p>QuoteAuthor3</p>
      </div>
    </div>
  </div>

  <div id="carousel-right-control">
    <a class="carousel-control-next" href="#carouselReactions" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>

Answer 1

只需将您的参考 CDN 更改为以下，那么您一定不会再有任何问题。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>

Answer 2

您使用carousel 中的bootatrap-4 并使用bootstrap-3。

这是引导 3 的代码

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
  <h2>Carousel Example</h2>  
  <div id="myCarousel" class="carousel slide" data-ride="carousel">

    <div class="carousel-inner">
      <div class="item active">
        <img src="https://material.angular.io/assets/img/examples/shiba1.jpg"  style="width:100%;">
      </div>

      <div class="item">
        <img src="https://material.angular.io/assets/img/examples/shiba2.jpg" style="width:100%;">
      </div>
    
      <div class="item">
        <img src="https://material.angular.io/assets/img/examples/shiba1.jpg" style="width:100%;">
      </div>
    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>