Предварительная загрузка всей карусели Bootstrap

Question

Долгое время читатель, впервые постер.

Я недавно начал учиться использовать бутстрап.

Я застреваю, пытаясь достать карусель для загрузки, показывая вращающееся колесо (или аналогичный эффект).

Я собрал эффект, который я собираюсь сделать, мои первые четыре изображения «перелистывают», а карусель останавливается на моем конечном изображении - но то, что я не могу сделать, - это загрузить всю нагрузку на карусель вращающееся колесо перед началом карусели.

Это незавершённая работа - http://maxsendak.com/test/pu_v2/max.html - так что вы можете видеть, это весь тег заголовка, который нужно загрузить с помощью «загрузки», прежде чем он запускает сценарий карусели и начинает перемещаться по слайдам.

<header id="myCarousel" class="carousel carousel-fade" data-ride="carousel" data-wrap="false"> 

<!-- Wrapper for Slides --> 
<div class="carousel-inner"> 
<!-- START big image panel --><div class="item active"> 
<div id="top" class="header" style="background-image:url('http://www.maxsendak.com/test/pu_v2/img/people/max/1.jpg');"> 
<div class="text-vertical-center people_text_over_image"> 

</div> 
</div> 
</div><!-- END big image panel --> 
<!-- START big image panel --><div class="item"> 
<div id="top" class="header" style="background-image:url('http://www.maxsendak.com/test/pu_v2/img/people/max/2.jpg');"> 

</div> 
</div><!-- END big image panel --> 
<!-- START big image panel --><div class="item"> 
<div id="top" class="header" style="background-image:url('http://www.maxsendak.com/test/pu_v2/img/people/max/4.jpg');"> 

</div> 
</div><!-- END big image panel --> 
<!-- START big image panel --><div class="item"> 
<div id="top" class="header" style="background-image:url('http://www.maxsendak.com/test/pu_v2/img/people/max/3.jpg');"> 

</div> 
</div><!-- END big image panel --> 
<!-- START big image panel --><div class="item"> 
<div id="top" class="header" style="background-image:url('http://www.maxsendak.com/test/pu_v2/img/people/max/5.jpg');"> 
<div class="text-vertical-center people_text_over_image"> 
<h1>Max Wilson</h1> 
<h3>Creative</h3> 
<br> 
<a href="#about" class="btn btn-dark btn-lg">See More</a> 
</div> 
</div> 
</div><!-- END big image panel --> 

</div> 

</header> 

Сценарий огнь карусели должен стрелять после загрузки всех.

<!-- Script to Activate the Carousel --> 
<script> 
$('.carousel').carousel({ 
    interval: 500, //changes the speed 
    pause: "none", 
}) 
</script> 

Как это часто бывает, когда я изучаю свой путь вокруг этих вещей, я думаю, что это может быть, я что-то просто не хватает - это так?

Answer 1

Удалить данные-ездить = «карусель» - это то, что заставляет карусель начинать движение при загрузке страницы. Вместо этого вы можете запустить карусель вручную с помощью JavaScript, когда вы будете готовы с

$('.carousel').carousel() 

Примечание - если вы хотите, чтобы ждать, пока ваши изображения все загружены. Вы положили бы это руководство на загрузку окна так

$(window).load(function() { 
    // + any other carousel related stuff that has to wait for the images to complete loading 
    $('.carousel').carousel() 
})