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寬度

回答

相關問題