CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3carousel
Mariana Hernandez
Mariana Hernandez

Reputation: 1969

Changing carousel images with media queries strange bug

I have this carousel and i need to change the images depending on the media size, i use this html and css and it works, but the second and third image first appear blank (carousel disappears), and then after like 6 seconds, the image appears. If i don't use the css, they load normally.

I already tried adding display block to the ones i want to show but that does not work either

@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>

Upvotes: 0

Views: 1955

Answers (2)

J. A. Streich
J. A. Streich

Reputation: 1712

Picture Element

Picture element is the official solution to the responsive image problem, but not all browsers support it yet (though there are 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>

The working group spec: http://www.w3.org/TR/html-picture-element/

The Chrome Team's HTML5 Rocks Blog: http://www.html5rocks.com/en/tutorials/responsive/picture-element/

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

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

Your Current Approach

That said, your issue with the approach your using is the gap between your break points:

 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.

That middle case is an issue. Moreover, the slider-lg and slider-sm should be classes, not ids; and should be on the images, not the divs. display:none; on the div would likely override the carousel's CSS and break things.

Upvotes: 1

Mat Taylor
Mat Taylor

Reputation: 191

Can't say for sure as there is no fiddle to work with, or even any idea what carousel you are using, but doing display:none; will just confuse the carousel as it will step through each div, some of which will not display. You are better off using your show/hide on the image itself

e.g.

<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>

Upvotes: 0

Related Questions