BxSlider - height and width settings

Question

I started using bxSlider and I ran into a problem. I want a slider with a fixed width (all images have the same value) and adaptive height. This 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 shouldn't be done), and the height is static. Another problem is that the slider is not centered on the page and does not have the correct width.

Sample 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 corresponding HTML code can be found on the page (line of source code 53).

EDIT:

The centering problem is currently resolved, but bxSlider still warps images with the same height AND the same width. I just want them to have the same width (which the original images have) and the height should be adaptive.

Answer 1

How about the slideWidth property, from the page using 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 the height and width of the images at the media control points worked for me.

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