Bxslider

Question

我正在实现 bx 滑块。我使用滑块中的文本内容。我需要根据内容调整 li 内容宽度。因为有些 li 内容是大内容，有些 small.Have 有什么默认选项吗？我尝试了以下代码。

Html代码：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://bxslider.com/lib/jquery.bxslider.min.js"></script>

<ul class="bxslider">
<li>1 Lorem ipsum dolor sit amet</li>
<li>2  sit amet </li>
<li>3 Lorem ipsum t</li>
<li>4 Lorem ipsum dolor sit amet dolor sit amet </li>
<li>5 Lorem </li>
<li>6 Lorem ipsum dolor sit amet</li>
<li>7 Lorem</li>
<li>8 Lorem ipsum dolor sit amet</li>
<li>9 Lor</li>
<li>10 Lorem ipsum dolor sit amet</li>

<div class="outside">
<h3>This div is outside of the slider</h3>
<span id="slider-prev"></span> | <span id="slider-next"></span>
</div>

js代码：

$('.bxslider').bxSlider({
  nextSelector: '#slider-next',
  prevSelector: '#slider-prev',
  nextText: 'Onward →',
  prevText: '← Go back',
  minSlides: 3,
  maxSlides: 5,
  slideWidth: 360,
  slideMargin: 0,
  adaptiveHeight: true,
  infiniteLoop: false,
  hideControlOnEnd: true
});

JsFiddle Link : http://jsfiddle.net/nwvW9/85/

Answer 1

您不能使用 BXSlider 的默认选项来实现此目的。但是，您可以通过一些技巧。

移除固定幻灯片宽度线。

  slideWidth: 360,

添加CSS。 (使用重要carefully)

li{
    width: initial !important;
    margin: 0px 20px;
}

Fiddle: http://jsfiddle.net/36opbff9/

Bxslider - li 宽度根据多张幻灯片中的内容进行调整

Bx slider - li width adjust based on content in mulitple number of slides

jquery