I'm really struggling to figure out why the bootstrap carousel code isn't working for me. It's frustrating because I followed the example on the bootstrap website and only made minor customizations, so it should be functioning properly. I suspect it might be an issue with the versions of bootstrap or jquery, but I have verified that both are up to date. If anyone has any insight or can offer assistance, please help! ^^
#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>