之前在Stackoverflow上曾问过这个问题:Bootstrap carousel ignoring data-interval attribute
但是答案与我的情况无关。
如标题中所述,data-interval属性不会更改每个幻灯片在传送带中停留的时间。此刻太快了。我已经在CSS中搜索了它的来源,但是我看不到任何与间隔时间有关的信息。这是我的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
/* 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;
}
还有什么其他可能的原因?
在哪里可以看到原始的bootstrap 3 CSS文件,以便知道哪些类控制着什么属性?因为它们是隐藏的,所以我经常很难知道要控制CSS的类和属性。