bxSlider - height and width settings

Question

I justed started using bxSlider and I ran into a problem. I want a slider with fixed width (all images have the same value) and adaptive height. It is a pretty standard task, but I'm stuck and I don't know what to do. Right now bxSlider is resizing my images (which it should not do) and the height is static. Another problem is that the slider is not centered on the page and do not have the right width.

Example size is no longer available.

This is my jQuery initialization code:

        $(window).load(function() {
        $('.bxslider').bxSlider({
            mode: 'fade',
            captions: true,
            pagerCustom: '#bx-pager',
            adaptiveHeight: true
        });
    });

and the relevant HTML code can be found on the page (source code line 53).

EDIT:

Right now the centering problem is solved but bxSlider is still deforming the images to have the same height AND the same width. I just want them to have the same width (which the original images have) and the height to be adaptive.

You should include the relevant code in your post. – Boaz Dec 24 '13 at 10:25 — Boaz, Dec 24 '13 at 10:25

webdeveloper · Accepted Answer · 2013-12-24T11:14:57.363

7

What about slideWidth property, from page with bxslider options

The width of each slide. This setting is required for all horizontal carousels!

Like this:

$('.bxslider').bxSlider({
   mode: 'fade',
   captions: true,
   pagerCustom: '#bx-pager',
   adaptiveHeight: true,
   slideWidth: 150
});

Added:

.bx-wrapper img {
    margin: 0 auto;
}

edited Dec 24 '13 at 11:14

answered Dec 24 '13 at 10:54

webdeveloper

17,174
3
48
47

Oh, I overlooked this property. It solver the center problem, but it is still resizing the images to inappropriate size (the website is updated, you can check it out). – Darkry Dec 24 '13 at 11:02
@Darkry You could try to align images – webdeveloper Dec 24 '13 at 11:16
yes, margin: 0 auto solver center problem. But the images are still resized, so they have the same height (and some of them are therefore smaller). I want all of theme be in their original size with different heights. – Darkry Dec 24 '13 at 12:35
@Darkry Remove `style="height: 500px;"` from your images – webdeveloper Dec 24 '13 at 13:27

score 2 · Answer 2 · answered Oct 25 '16 at 19:58

2

Setting up a height & width for images on media breakpoints did work for me.

.bx-wrapper img {
   width: 140px;
   height: 140px;
}

@media screen and (max-width: 767px) {
    .bx-wrapper img {
        width: 70px;
        height: 70px;
    }
}

answered Oct 25 '16 at 19:58

Sneha S

21
1

bxSlider - height and width settings

2 Answers2