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?

Solution

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>

Comments

[newTag]

@MDTech.us_MAN That is the jQuery initialization code, where we specify the width of all slides. (only once)

[Lucas Bustamante]

It only centralizes horizontally

[Maxwell175]

So, to sum this up, the width cannot change dynamically. You can only set it once for everything.