The question was asked before on Stackoverflow here: Bootstrap carousel ignoring data-interval attribute
But the answer was not relevant in my case.
As stated in the title the data-interval attribute does not change the time each slide lingers in the carousel. at the moment it is too fast. I have searched for where this is coming from in the CSS, but I cannot see anything related to the interval time. Here is my HTML:
<!-- Header Carousel -->
<header id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="3000">
<!-- 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">
<div class="item active">
<div class="fill"><%= image_tag "Acu.png"%></div>
<div class="carousel-caption">
<h2>Caption 1</h2>
</div>
</div>
<div class="item">
<div class="fill" ><%= image_tag "terapia-nut.png"%></div>
<div class="carousel-caption">
<h2>Caption 2</h2>
</div>
</div>
<div class="item">
<div class="fill" ></div>
<div class="carousel-caption">
<h2>Caption 3</h2>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
</header>
<!-- Page Content -->
<div class="container">
.
.
.
.
.
.
<!-- /.container -->
<!-- Script to Activate the Carousel -->
<script>
$(document).on('ready', function () {
$('.carousel').carousel({
interval: 1000 //changes the speed
})
});
</script>
CSS for carousel
/* Home Page Carousel */
header.carousel {
height: 50%;
}
header.carousel .item,
header.carousel .item.active,
header.carousel .carousel-inner {
height: 100%;
}
header.carousel .fill {
width: 100%;
height: 100%;
background-position: center;
background-size: cover;
}
What other possible causes of this could there be?
Where can I see the raw bootstrap 3 CSS files in order to know what classes are controlling what attributes? Because they are hidden I often find it hard to know which classes and which attributes to change in order to control the CSS.
