自适应bxSlider宽度或中心图像

Question

我有一张幻灯片，上面有许多不同宽高比的图片。我希望图像在幻灯片中居中。我该怎么做，甚至更好，如何自动调整滑块大小？

Answer 1

解决中心问题

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

slideWidth option

每张幻灯片的宽度。所有水平转盘都需要此设置！

像这样：

<强> 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>