Bootstrap传送带不会滑动

Question

I absolutely do not understand why the bootstrap carousel code doesn't work at all with me. It's strange, i took the example which is on the bootstrap website, just customized some little things it should be work. I think it's a problem of version of bootrstrap or jquery but both of them are the last ones i found so i do not see where the problem come from. If anyone could help me, please ^^

 #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

You use carousel of bootatrap-4 and use bootstrap-3 .

Here is code to bootstrap 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> 

Answer 2

Just change your reference CDN's to below, then you must not have any issue again.

<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>