Изменение размера карусели Bootstrap

Question

У меня есть веб-сайт, который использует карусель бутстрапа. Вот мой код:

<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, слайдеры загружаются идеально и быстро, однако теперь элементы слайдов нужно замедлять, потому что они слишком быстро перемещаются между слайдами.

Я думаю, проблема заключается в том, что «активное» состояние не предоставляется слайду/изображению до тех пор, пока не пройдет интервал. Как я могу добавить активное состояние к вышеуказанному коду для первого слайда автоматически при загрузке страницы, а не дождаться, пока после интервала?

Любая помощь будет принята с благодарностью

Answer 1

Вот код, который я использовал, чтобы решить проблему:

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

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

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