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.