Here is my code for an Image carousel:
<div class="container">
<div class="row">
<div class="col-md-12 col-md-offset-0">
<div id="imageCarousel" class="carousel slide" data-interval="4000"
data-ride="carousel" data-pause="hover" data-wrap="true">
<ol class="carousel-indicators">
<li data-target="#imageCarousel" data-slide-to="0" class="active"></li>
<li data-target="#imageCarousel" data-slide-to="1"></li>
<li data-target="#imageCarousel" data-slide-to="2"></li>
<li data-target="#imageCarousel" data-slide-to="3"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="~/Images/Desert.jpg" class="img-responsive">
<div class="carousel-caption">
<h3>Desert</h3>
<p>Desert Image Description</p>
</div>
</div>
<div class="item">
<img src="~/Images/Jellyfish.jpg" class="img-responsive">
<div class="carousel-caption">
<h3>Jellyfish</h3>
<p>Jellyfish Image Description</p>
</div>
</div>
<div class="item">
<img src="~/Images/Lighthouse.jpg" class="img-responsive">
<div class="carousel-caption">
<h3>Lighthouse</h3>
<p>Lighthouse Image Description</p>
</div>
</div>
<div class="item">
<img src="~/Images/Penguins.jpg" class="img-responsive">
<div class="carousel-caption">
<h3>Penguins</h3>
<p>Penguins Image Description</p>
</div>
</div>
</div>
<a href="#imageCarousel" class="carousel-control left" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a href="#imageCarousel" class="carousel-control right" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</div>
</div>
I also included the following jQuery script:
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
Lastly, I adjusted the size of the image carousel with the following code:
<style>
.carousel-inner > .item > img {
width: 1200px;
height: 360px;
}
</style>
However, I encountered an issue where the dimensions of the carousel change abruptly upon page load. Modifying the width works as expected, but the height does not adjust accordingly. Decreasing the width also impacts the height. This code functions correctly in a new MVC web application, but when implemented in an existing project, the carousel height issue arises.
If anyone has a solution to resolve this problem, I would greatly appreciate your input.