bxslider NOT responsive when slides are wrapped inside a floated element

Question

After testing various responsive jquery sliders, i have decided to go with bxslider. I am lost now due to a problem which i don't know how to solve. I want my bxslider (version 4.1) to be on the right side of my page

html:

<div id="about">
    <h2>My Title</h2>
    <p>...Some Text...</p>
</div>

<div id="slideshow">    
    <ul class="bxslider">
       <li><img src="img/slide_1.jpg"></li>
       <li><img src="img/slide_2.jpg"></li>
       <li><img src="img/slide_3.jpg"></li>
       <li><img src="img/slide_4.jpg"></li>
    </ul>
</div>

css:

#about{
    width:400px; 
    float:left;
}
#slideshow{
    max-width:500px;
    float:left;   /* IF I REMOVE THIS LINE, SLIDER IS WORKING CORRECTLY - RESPONSIVE */
}

js:

$(document).ready(function() {                  
    $('.bxslider').bxSlider({
      controls: false,
      auto: true
    }); 
});

If i add float:left to #slideshow, then a strange thing happens, all the images are in small thumbs loaded. Obviously bxslider doesn't have info about the image sizes. If i give the ul.bxslider width and height about the first element, then it works, but again no resposivness (slides not scaling)

Side problem:

My images are 500px wide, if i give #slideshow width=500px then i also loose responsivness. Thats why i use: max-width:500px.

• Browser is: chrome,
• Pictures are all of the same format (500x356) JPG
• Latest version of stable jquery: 10.1 Latest version of bxslider: 4.1
• Tested on small created site with only those 2 elements floating
  (about & slideshow)

Answer 1

I had the same issue however it didn't do anything responsively no matter what the size/viewport etc.

I like bxSlider so I hunted around source, for a while and found that it was a css issue.. you have to add:

.bx-wrapper img{
    display:block;
    max-width: 100%;
}

and it worked for me. I hope that this fixed it for you.

NB: This may be fixed in a different version.

Answer 2

In my case it was due to the compressed version of the js "jquery.bxslider.min.js" when I used the uncompressed file it worked. The slider is responsive with the uncompressed file so the compression must have ruined something.

Answer 3

The same problem i see with other slider plugins, losing their responsiveness when wrapped inside a floated element. The solution, in my case, was to add:

@media screen and (max-width: 600px) {
    #slideshow {
        float:none;
    }
}

So initially, somewhere in your styles you floated the element which contains the slides, but when you viewport is less than 600px, there's no need for the slider to maintain on the right side (due to smaller width), removing the float, return the responsiveness back again.