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?

score 25 · Answer 1 · answered Sep 24 '13 at 08:16

25

You can add following css.

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

Check out this fiddle..bxslider

answered Sep 24 '13 at 08:16

nik

4,339
1
31
50

score 15 · Answer 2 · answered Sep 24 '13 at 08:26

15

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

answered Sep 24 '13 at 08:26

Mihai Alex

670
6
13

score 7 · Answer 3 · edited Sep 22 '15 at 22:48

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

score 3 · Answer 4 · answered Aug 05 '15 at 17:47

3

This worked for me, and allows you to keep responsiveness

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

answered Aug 05 '15 at 17:47

Will Noon

31
1

score 1 · Answer 5 · answered Mar 19 '15 at 05:41

1

I solved centering and fixed size with these lines

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

}

answered Mar 19 '15 at 05:41

Edson Q. Paredes

11
1

1

doesn't help with centering :( – Picard Nov 14 '15 at 20:11

score 0 · Answer 6 · edited Dec 20 '13 at 16:43

0

I would recommend wrapping it with a div then adjusting the div's CSS. Bxslider I believe inherits the height & width.

.yourDivClass{
    height:200px;
    width:200px;
}

From here you can adjust the li's accordingly:

.yourDivClass li {
    background-color:green; //just to see the overflow if height & width isn't equal
}

Hope this helps.

edited Dec 20 '13 at 16:43

New Alexandria

6,369
4
50
71

answered Sep 25 '13 at 18:06

m33bo

1,264
1
11
31

When I am giving custom padding on li & image last image crop automatically. And slider come blank end of carousels.. – Mohammed Javed Apr 03 '16 at 09:12

score 0 · Answer 7 · answered Feb 19 '14 at 16:13

0

Update!

http://jsfiddle.net/u62LR/

Just set your image height...

.bx-wrapper, .bx-viewport {
    height: [IMAGE HEIGHT] !important; 
}

answered Feb 19 '14 at 16:13

Ico Portela

114
1
14

score 0 · Answer 8 · answered Aug 27 '15 at 00:44

0

If you don't want use !important just make like this

.bx-wrapper {
  height: 400px; //Just choose your height
  display: block;
  overflow: hidden;
 }

answered Aug 27 '15 at 00:44

Marco Gonzaga

1

score 0 · Answer 9 · edited Jul 13 '18 at 10:26

0

Just use the max-height:

.bx-wrapper .bx-viewport{max-height: 657px;}

edited Jul 13 '18 at 10:26

Yannis

1,420
5
24
40

answered Jul 13 '18 at 09:36

Bxslider Setting Height

9 Answers9

Linked