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']);
});

});

我将间隔：5000更改为间隔：1000，因为当页面加载时滑块会显示项目时出现延迟。由于将间隔更改为1000，滑块可以完美而快速地加载，但是现在幻灯片项目需要放慢速度，因为幻灯片之间的速度太快。

我认为问题在于＆＃34;活跃＆＃34;直到间隔之后，状态才被给予幻灯片/图像。如何在页面加载时自动为第一个幻灯片项的上述代码添加活动状态，而不是等到间隔后？

非常感谢任何帮助

Answer 1

以下是我用来解决问题的代码：

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

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

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

Bootstrap Carousel间隔改变

1 个答案: