我在网站上使用Bootstrap 3并且我希望一次使用bxSlider自动收录器显示两列,但是slideWidth参数需要绝对宽度,这是不可能的,因为我在BS的预定义CSS中使用百分比.
我一直在寻找,似乎无法找到关于这个问题的任何内容.
这是HTML：
<div class="row">
<ul class="cs-ticker">
<li>
<div class="col-lg-6 col-md-6">
<div class="image">
<a href=""><img src="images/cs-1.jpg" alt="" class="img-responsive" /></a>
<div class="overlay">
<h3><a href="">Case Study Title</a></h3>
<a href="" class="btn btn-outline btn-lg btn-white">View Case Study</a>
</div>
<span class="label">Residential</span>
</div>
<p>Fusce dapibus,tellus ac cursus commodo,tortor mauris condimentum nibh,ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper.</p>
</div>
</li>
<li>
<div class="col-lg-6 col-md-6">
<div class="image">
<a href=""><img src="images/cs-1.jpg" alt="" class="img-responsive" /></a>
<div class="overlay">
<h3><a href="">Case Study Title 2</a></h3>
<a href="" class="btn btn-outline btn-lg btn-white">View Case Study</a>
</div>
<span class="label">Commercial</span>
</div>
<p>Fusce dapibus,ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper.</p>
</div>
</li>
</ul>
</div>
<script>
$(document).ready(function(){
var CaseStudyTicker = $('#recent-case-studies .cs-ticker');
var CaseStudyTickerOpts = {
auto: false,speed: 700,controls: true,pager: false,responsive: false,maxSlides: 2,minSlides: 2,adaptiveHeight: false
};
if( isMobile.any() ) {
CaseStudyTickerOpts.controls = false;
}
//CaseStudyTicker.bxSlider(CaseStudyTickerOpts);
});
</script>
忽略isMobile位,因为它是独立的..
基本上我认为宽度需要设置onSliderLoad并且当窗口调整大小时宽度需要重置？
