Multi tool use

Bootstrap carousel doesn't slide

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>

.carousel-item

.item

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


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

carousel

bootatrap-4

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>

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.