Bx滑块 - 根据多个幻灯片中的内容调整li宽度

我正在实施bx滑块。我在滑块中使用文本内容。我需要根据内容调整li内容宽度。因为一些李的内容是大的内容，其中一些小。有任何默认选项有？我试过下面的代码。Bx滑块 - 根据多个幻灯片中的内容调整li宽度

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链接：http://jsfiddle.net/nwvW9/85/

来源

2015-06-22 RSKMR

我相信multislides动态宽度不适用于bxslider。因为一旦你提到slideWidth：360，它就会设置所有幻灯片的宽度。 – VJS

您不能使用BXSlider的默认选项来实现此目的。但是，有些黑客可以。

删除固定的幻灯片宽度线。

slideWidth: 360,

添加CSS。（使用重要carefully）

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

小提琴：http://jsfiddle.net/36opbff9/

来源

2015-06-22 05:59:29 aadarshsg

谢谢。它的工作很好:) – RSKMR

Bx滑块 - 根据多个幻灯片中的内容调整li宽度

回答

相关问题