为什么Bootstrap 3轮播会忽略Rails应用程序中的“数据间隔”属性?

时间:2018-06-28 11:05:18

标签: css ruby-on-rails twitter-bootstrap-3 bootstrap-carousel

之前在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的类和属性。

0 个答案:

没有答案