Adaptive bxSlider width or center image

Question

I have a slideshow with pictures of many different aspect ratios. I would like the images to be centered in the slideshow. How can I do this, or even better, how can I automatically resize the slider?

Answer 1

For solving the center problem

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

slideWidth option

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

Like this:

JS:

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

HTML:

<ul class="bxslider">
  <li><img src="/images/730_200/hill_fence.jpg" /></li>
  <li><img src="/images/730_100/tree_root.jpg" /></li>
  <li><img src="/images/730_150/me_trees.jpg" /></li>
</ul>