jquery - 自适应 bxSlider 宽度或中心图像

Question

我有一个幻灯片，其中包含许多不同纵横比的图片。我希望图像在幻灯片中居中。我该怎么做，或者更好的是，我如何自动调整 slider 的大小？

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>