自适应bxSlider宽度或中心图像

Question

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

Answer 1

解决中心问题

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

slideWidth选项

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

像这样:

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>