Question

我正在使用bxslider，用于我的旋转木马图像..

$(document).ready(function(){
  $('.slider4').bxSlider({
  slideWidth: 300,
  minSlides: 2,
  maxSlides: 3,
  moveSlides: 1,
  slideMargin: 10
 });
});


<div class="slider4">
  <div class="slide"><img src="http://placehold.it/300x150&text=FooBar1"></div>
  <div class="slide"><img src="http://placehold.it/300x150&text=FooBar2"></div>
  <div class="slide"><img src="http://placehold.it/300x150&text=FooBar3"></div>
  <div class="slide"><img src="http://placehold.it/300x150&text=FooBar4"></div>
  <div class="slide"><img src="http://placehold.it/300x150&text=FooBar5"></div>
  <div class="slide"><img src="http://placehold.it/300x150&text=FooBar6"></div>
  <div class="slide"><img src="http://placehold.it/300x150&text=FooBar7"></div>
  <div class="slide"><img src="http://placehold.it/300x150&text=FooBar8"></div>
  <div class="slide"><img src="http://placehold.it/300x150&text=FooBar9"></div>
  <div class="slide"><img src="http://placehold.it/300x150&text=FooBar10"></div>
</div>

此代码来自bxlider站点的示例页面。这是我现在正在使用的那个。我刚刚注意到，当我将浏览器调整到较小的尺寸时，例如768,480和320 ..

它的响应性很强，但图像被切断，太小，不适合320px和480px。

我想要的是，如果我将浏览器的大小调整为480或320，它将仅显示2个图像。保留图像的高度和宽度。关于如何做到的任何想法？

Answer 1

bxslider有一个响应选项，你可以设置为false。这应该停止调整滑块的大小。然后你可以在reloadSlider()上使用resize()重新加载滑块，这样就可以显示较少的图像。

喜欢：http://jsfiddle.net/Lhz7qbzc/

bxSlider图像自定义高度和宽度

1 个答案: