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?
For solving the center problem
.bx-wrapper img {
margin: 0 auto;
}
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>