Bootstrap Carousel Image Загрузка

Question

Катушка загрузочного ролика работает и перемещается вокруг изображений. Однако при первом открытии веб-страницы карусельный слайдер отображает пустой фон в течение секунды. Впоследствии он работает правильно.

Я попытался решить проблему с помощью этого css, но не работает.

.carousel-control { 
    background-color: transparent; 
} 

Есть вопросы, связанные с предварительной загрузкой всей карусели. Какой код jquery необходим для этого?

Вы знаете, как избавиться от пустого фона с раздельной секундой?

<div class="carousel slide" id="myCarousel" data-ride="carousel"> 

     <div class="carousel-inner" role="listbox"> 
     <div class="item active"> 
      <img class="first-slide" src="{% static 'img/img1.jpg' %}" alt="First slide" /> 
     </div> 

     <div class="item"> 
      <img class="second-slide" src="{% static 'img/img2.jpg' %}" alt="Second slide"> 
     </div> 

     <div class="item"> 
      <img class="third-slide" src="{% static 'img/img3.jpg' %}" alt="Third slide"> 
     </div> 
     </div> 

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

Answer 1

Это сработало для меня.

CSS:

.preload{ display: none; } 

HTML

<div class="preload"> 
<img src="img/img1.jpg" /> 
<img src="img/img2.jpg" /> 
<img src="img/img3.jpg" /> 
</div>