javascript - Bootstrap Carousel 间隔改变

Question

我有一个使用 Bootstrap 轮播的网站。这是我的代码:

<div id="slider">
  <div id="carousel-bounding-box">
     <div class="carousel slide" id="myCarousel">
         <div class="carousel-inner">
                <?php
    if ($images = get_field('images', $design_id)) {
    foreach ($images as $key => $image) {
        $active = $key == 0 ? 'active' : '';
        echo 'item" data-interval="1000">';
        echo '<img src="' . $image['image']['sizes']['large'] . '" />';
        echo '</div>';                        }
    }
?> 

         </div>
         <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
         <span class="glyphicon glyphicon-chevron-left"></span>                                       
         </a>
         <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
         <span class="glyphicon glyphicon-chevron-right"></span>                                       
          </a>                                
      </div>
  </div>
</div>

这是我的 jQuery:

jQuery(document).ready(function($) {

    $('#myCarousel').carousel({
            interval: 1000
    });

    $('#carousel-text').html($('#slide-content-0').html());

    //Handles the carousel thumbnails
    $('[id^=carousel-selector-]').click( function(){
            var id_selector = $(this).attr("id");
            var id = id_selector.substr(id_selector.length -1);
            var id = parseInt(id);
            $('#myCarousel').carousel(id);
    });


    // When the carousel slides, auto update the text
    $('#myCarousel').on('slid.bs.carousel', function (e) {
             var id = $('.item.active').data('slide-number');
            $('#carousel-text').html($('#slide-content-'+id).html());
    });

      (function($) {
  fakewaffle.responsiveTabs(['xs', 'sm']);
});

});

我将 interval: 5000 更改为 interval: 1000，因为当页面加载时 slider 显示项目时存在延迟。由于将间隔更改为 1000， slider 可以完美且快速地加载，但是现在需要放慢幻灯片项目的速度，因为它们在幻灯片之间的速度太快了。

我认为问题在于“事件”状态直到间隔之后才赋予幻灯片/图像。如何在页面加载时自动为第一个幻灯片项目的上述代码添加事件状态，而不是等到间隔之后？

任何帮助将不胜感激

Answer 1

这是我用来解决问题的代码:

jQuery(document).ready(function($) {

    $('#myCarousel').carousel({
            interval: 3000
    });

     $('#myCarousel .item:first').addClass('active');
});