Bxslider Setting Height

Question

So I just started using bxslider.

I however I'm having issues setting the size of the slider. Naturally it takes the height of the largest element (I think). How do I set it to a fixed height, say 200px?

Answer 1

You can add following css.

.bx-wrapper, .bx-viewport {
    height: 200px !important; //provide height of slider
}

Check out this fiddle..bxslider

Answer 2

You need to set all 3 elements involved with the height of the image displayed which are the main container, the inner container and the images themselves...

like so:

.bx-wrapper, .bx-viewport, .bx-wrapper img {height: 500px !important;}

• i should note that:
  bxSlider uses 100% width to keep stuff responsive so you might get a distorted image by forcing the height, and that is why you need to serve pre-sized images to the slider (just to fix the height issue..)

• solution:
  use media queries to set a different height when viewed in mobile (just a suggestion)

best of luck...

Answer 3

This worked for me, and allows you to keep responsiveness

    .bx-wrapper, .bx-viewport, .bx-wrapper img {max-height: 200px !important;}

Answer 4

Why not style the elements? If you set a fix height for the wrapper you could get in trouble with overflows and positioning.

If you are using lists:

.bx-wrapper ul li { height: 200px; }

Answer 5

I solved centering and fixed size with these lines

.bx-wrapper img {
height: 400px;
max-width: auto;
display: inline;

}