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.

Answer 1

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

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