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)

m33bo · Accepted Answer · 2016-04-13T16:17:04.277

9

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.

edited Apr 13 '16 at 16:17

answered Sep 25 '13 at 16:18

m33bo

1,264
1
11
31

score 7 · Answer 2 · answered Jun 02 '14 at 07:57

7

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.

answered Jun 02 '14 at 07:57

ckhawand

71
1
1

This is the answer, used the uncompressed version and bingo – Rob Morris Jul 28 '14 at 11:55

score 3 · Answer 3 · edited Apr 29 '14 at 14:25

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.

score 1 · Answer 4 · edited Sep 04 '14 at 07:29

1

CSS :

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

edited Sep 04 '14 at 07:29

Oomph Fortuity

4,952
10
35
85

answered Sep 04 '14 at 07:09

Sebin Simon

1,327
1
14
24

score 0 · Answer 5 · answered May 29 '13 at 16:39

0

i had a few time ago a similiar problem with the bxslider and dont know how to solve,

my sugesstion is use elastislider link

it works for me with large images and no problems with the responsive design.

it is easy to implement and you can change the style in the .css files how you want

answered May 29 '13 at 16:39

user2232273

4,606
13
46
70

thx, but elastislider is a carousel, while i need just a good simple smooth responsive horizontal slideshow with pagination bullets. I tried flexslider but it has a bug due to slow loading of the slider, you can actually see it flickering at the beginning. – PathOfNeo May 29 '13 at 16:52

score 0 · Answer 6 · answered Aug 07 '14 at 14:40

I had the problem as well, and I solved it with setting an initial very high width on the slide li elements of the slider.

bxSlider will then automatically set an appropriate value for the slides.

li {
  width: 10000px; // inital width, bxSlider sets its own
  display: block;
}
li img {
  max-width: 100%;
}

bxslider NOT responsive when slides are wrapped inside a floated element

6 Answers6