Изменение изображений карусели со средствами массовой информации странная ошибка

Question

У меня есть эта карусель, и мне нужно изменить изображения в зависимости от размера носителя, я использую этот html и css, и это работает, но второе и третье изображения сначала выглядят пустыми (карусель исчезает), а затем, примерно через 6 секунд, появится изображение. Если я не использую css, они загружаются нормально.

я уже пытался добавить блок дисплея на те, я хочу показать, но это не работает, либо

@media only screen and (max-width: 479px) { 
#slider1-lg { display: none; } 
#slider2-lg { display: none; } 
#slider3-lg { display: none; } 

} 
@media only screen and (min-width: 768px) { 
#slider1-sm { display: none; } 
#slider2-sm { display: none; } 
#slider3-sm { display: none; } 

} 





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

      <div class="carousel-inner " role="listbox"> 
       <div id="slider1-lg" class="item active"> <img src="img/slider/slide-01-hm-1920.jpg" width="100%" height="100%"> </div> 
       <div id="slider1-sm" class="item "> <img src="img/slider/slide-01-hm-720.jpg" width="100%" height="100%"> </div> 

       <div id="slider2-lg" class="item "> <img src="img/slider/slide-02-hm-1920.jpg" width="100%" height="100%"> </div> 
       <div id="slider2-sm" class="item "> <img src="img/slider/slide-02-hm-720.jpg" width="100%" height="100%"> </div> 

        <div id="slider3-lg" class="item "> <img src="img/slider/slide-03-hm-1920.jpg" width="100%" height="100%"> </div> 
        <div id="slider3-sm"class="item "> <img src="img/slider/slide-03-hm-720.jpg" width="100%" height="100%"> </div> 

      </div> 
      <a class="left carousel-control" href="#myCarousel2" role="button" data-slide="prev"> <span style="color:#fff" class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> 
      <a class="right carousel-control" href="#myCarousel2" role="button" data-slide="next"> <span style="color:#fff" class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> 
     </div> 

Answer 1

Picture Element

элемент Picture является официальным решением отзывчивым проблемы с имиджем, но не все браузеры поддерживают его пока (хотя есть polyfills)

<div class="item active"> 
    <picture> 
    <source media="(max-width: 479px)" srcset="img/slider/slide-01-hm-720.jpg"> 
    <source media="(min-width: 479px)" srcset="img/slider/slide-01-hm-1920.jpg"> 
    <img src="img/slider/slide-01-hm-1920.jpg" width="100%" height="100%"/> 
    </picture> 
</div> 

Рабочая группа Спец.: http://www.w3.org/TR/html-picture-element/

HTML5 команды Chrome Chrome ocks Блог: http://www.html5rocks.com/en/tutorials/responsive/picture-element/

Mozilla, Docs: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture

polyfill: https://scottjehl.github.io/picturefill/

Ваш текущий подход

говорится, ваш вопрос с подходом вы используете разрыв между ваши пункты перерыва:

width < 479 => slider1-lg is hidden, and slider1-sm is showing. 
479 < width < 768 => slider1-lg and slider1-sm are both showing. 
width > 768 => slider1-lg is showing, and slider1-sm is not showing. 

Этот средний случай проблема. Кроме того, слайдер-lg и слайдер-sm должны быть классами, а не идентификаторами; и должен быть на изображениях, а не на div. Дисплей: нет; на div, скорее всего, переопределит CSS карусели и сломает вещи.

Answer 2

Не могу сказать точно, как нет скрипки работать, или даже какие-либо идеи, что карусель, который вы используете, но делать отображение: нет; будет просто путать карусель, поскольку она будет проходить через каждый div, некоторые из которых не будут отображаться. Вам лучше использовать ваше шоу/скрыть на самом изображении

например.

<div class="item active"> 
    <img id="slider1-lg" src="img/slider/slide-01-hm-1920.jpg" width="100%" height="100%"> 
    <img id="slider1-sm" src="img/slider/slide-01-hm-720.jpg" width="100%" height="100%"> 
</div>