I am currently utilizing Bootstrap 3.xx for website development and encountering difficulties in getting a carousel to function correctly.
Website version - www.solo-fusion.com/test/index.htm
<div id="Carousel" class="carousel slide col-lg-8 col-offset-2">
<ol class="carousel-indicators">
<li data-target="#Carousel" data-slide-to="0" class="active"></li>
<li data-target="#Carousel" data-slide-to="1"></li>
<li data-target="#Carousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="//placehold.it/500x500" class="img-responsive">
</div>
<div class="item">
<img src="//placehold.it/500x500/EEEEEE" class="img-responsive">
</div>
<div class="item">
<img src="//placehold.it/500x500/FEFEFE" class="img-responsive">
</div>
</div>
<a class="left carousel-control" href="#Carousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#Carousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
This is the code section I'm using, along with this CSS:
.carousel {
height: 500px;
margin-bottom: 60px;
}
.carousel-caption {
z-index: 10;
}
.carousel .item {
height: 500px;
background-color: #777;
}
.carousel-inner > .item > img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 500px;
}
I am unsure of what's causing the issue, but the output appears distorted as shown here: https://i.sstatic.net/O3XV0.png
Any assistance would be greatly appreciated :)
UPDATE I have somehow managed to make it start scrolling now by manipulating the following JS:
<script type="text/javascript">
$(document).ready(function() {
$('#Carousel').carousel({
//options here
});
});
</script>
P.S. However, it is still malfunctioning :L
UPDATE #2
Below is an excerpt from the jkit.css pertaining to the carousel as suggested by someone that it might be the cause of the issue.
div.carousel {
overflow: hidden;
pointer-events: none;
text-align: center;
width: 100%;
height: 150px;
}
div.carousel-item {
float: left;
width: 20%;
height: 150px;
background: #E01B49;
margin: 0px;
padding: 0px;
text-align: center;
color: #fff;
font-weight: bold;
line-height: 200%;
}
div.carousel-item div {
padding: 20px;
border: 1px #fff solid;
height: 110px;
}
a.jkit-carousel-prev, a.jkit-carousel-next {
width: 40px;
background: #eee;
border: 1px #999 solid;
color: #333;
padding: 4px;
cursor: pointer;
cursor: hand;
margin-top: 10px;
text-align: center;
user-select: none;
}
a.jkit-carousel-prev:hover, a.jkit-carousel-next:hover {
background: #fff;
border: 1px #666 solid;
color: #000;
}
a.jkit-carousel-prev {
float: left;
}
a.jkit-carousel-next {
float: right;
}