Отзывчивый слайдер изображения bxslider работает только на перезагрузке страницы

Question

Я хочу использовать отзывчивый слайдер изображения «bxslider» (bxslider.com) на моем сайте. К сожалению, изображения слайдера часто не отображаются на странице, и видны только элементы управления. Однако, как только я обновляю страницу, изображения ползунка снова появляются.

Я посмотрел на подобные вопросы, заданные здесь, но его предложения, такие как «использовать jQuery 1.x», похоже, не работают.

Было бы здорово, если бы у кого-то было другое предложение! Фактический URL является: http://www.lauraniebel.com/casestudy01.htm и http://www.lauraniebel.com/casestudy02.htm А вот мой код:

<script src="js/modernizr-2.8.3.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
    <script src="js/jquery.bxslider.min.js"></script> 


    <div class="bxslider3">  
      <img src="img/cvnewsletters01.jpg" alt="Curtin Volunteers Newsletters"> 
      <img src="img/cvnewsletters02.jpg" alt="Curtin Volunteers Newsletters"> 
     </div> 

<div class="bxslider">  
      <img src="img/cvinfographic01.jpg" alt="Curtin Volunteers Infographic"> 
      <img src="img/cvinfographic02.jpg" alt="Curtin Volunteers Infographic Closeup"> 
     </div> 

<div class="bxslider2">  
      <img src="img/cvposters01.jpg" alt="Curtin Volunteers Posters"> 
      <img src="img/cvposters02.jpg" alt="Curtin Volunteers Posters"> 
     </div> 


<script> 
     $(document).ready(function(){ 
     $('.bxslider').bxSlider(); 
    }); 

     $(document).ready(function(){ 
     $('.bxslider2').bxSlider(); 
    }); 


    $(document).ready(function(){ 
     $('.bxslider3').bxSlider(); 
    }); 
</script> 

Answer 1

Оберните изображений внутри контейнера, и дать этому контейнеру явную ширину и высоту.

Или установите bxslider для загрузки после того, как изображения будут загружены, возможно, с использованием image onload

Как можно заметить, bxslider инициализации до того, как изображения имели времени для загрузки, вычисления 0 ширины и высоты для них, таким образом, давая им нет появление.

jsfiddle

Я обернут свои изображения в <div class="container"></div>, учитывая, что явной ширина/высота. Проблема заключается в встроенных элементах (изображениях), вычисляющих ширину/высоту на основе их содержимого (изображения, которые не загружены), а bxslider использует ширину и высоту 0 для инициализации.

Answer 2

Типичная проблема jQuery. JavaScript - это все равно, что «Вы еще не сделали что-то?» Найдено этот маленький плагин ... Он определяет, когда все изображения были надлежащим образом оказанные до ЮКЖД

Github link

CDN:

<script src="https://unpkg.com/imagesloaded@4.1/imagesloaded.pkgd.min.js"></script> <!-- or --> <script src="https://unpkg.com/imagesloaded@4.1/imagesloaded.pkgd.js"></script>