Почему карусель Bootstrap 3 игнорирует атрибут «интервал данных» в приложении Rails? - PullRequest
Новая
       34

Почему карусель Bootstrap 3 игнорирует атрибут «интервал данных» в приложении Rails?

0 голосов
/ 28 июня 2018

Этот вопрос ранее задавался по Stackoverflow здесь: Карусель начальной загрузки, игнорирующая атрибут интервала данных

Но ответ не был уместен в моем случае.

Как указано в заголовке, атрибут интервала данных не меняет время, в течение которого каждый слайд задерживается в карусели. на данный момент это слишком быстро. Я искал, откуда это исходит в 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;
}

Какие еще возможные причины этого могут быть?

Где я могу увидеть исходные файлы CSS начальной загрузки 3, чтобы узнать, какие классы управляют какими атрибутами? Поскольку они скрыты, мне часто трудно понять, какие классы и какие атрибуты нужно изменить, чтобы контролировать CSS.

...