I have a carousel on a webpage for customer comments. It works great except it moves too fast. I have searched the code but can't figure out how to slow it down. I have changed the $(document).ready(function(){
// Activate Carousel
$("#myCarousel").carousel({interval: 5000});
i tried changing the interval time to 20,000 even 200,000 but it didn't make a difference on the webpage. I am not sure what else to try.
<h2 class="yellow">What our customers say:</h2>
<div id="myCarousel" class="carousel slide text-center" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<h4>"some content."</h4>
</div>
<div class="item">
<h4>"more content"</h4>
</div>
<div class="item">
<h4>"one more comment."</h4>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<script>
$(document).ready(function(){
// Activate Carousel
$("#myCarousel").carousel({interval: 20000});
// Enable Carousel Indicators
$(".item1").click(function(){
$("#myCarousel").carousel(0);
});
$(".item2").click(function(){
$("#myCarousel").carousel(1);
});
$(".item3").click(function(){
$("#myCarousel").carousel(2);
});
$(".item4").click(function(){
$("#myCarousel").carousel(3);
});
// Enable Carousel Controls
$(".left").click(function(){
$("#myCarousel").carousel("prev");
});
$(".right").click(function(){
$("#myCarousel").carousel("next");
});
});
</script>
and the css portion is:
.carousel-control.right, .carousel-control.left {
background-image: none;
color: #fdd818;
}
.carousel-indicators li {
border-color: #fdd818;
}
.carousel-indicators li.active {
background-color: #fdd818;
}
.carousel-inner > .item {
position: relative;
display: none;
-webkit-transition: 5s ease-in-out left;
-moz-transition: 5s ease-in-out left;
-o-transition: 5s ease-in-out left;
transition: 5s ease-in-out left;
}
.item h4 {
font-size: 19px;
line-height: 1.375em;
font-weight: 400;
font-style: italic;
margin: 70px 0;
}
.item span {
font-style: normal;
}