我已经制作了bxslider并将其设置为幻灯片,当单击控制按钮时移动2列。 问题是当幻灯片元素(LI)总计为5或奇数时,最后一张幻灯片仅移动1列。
如何让它始终移动2列
这是我的代码
<div class="mainDiv">
<ul class="masterSlider">
<li data-slide="1">1 </li>
<li data-slide="2">2</li>
<li data-slide="3">3 </li>
<li data-slide="4">4</li>
<li data-slide="5">5</li>
</ul>
</div>
var masterSlider;
$(document).ready(function(){
masterSlider = $('.masterSlider').bxSlider({
mode: 'horizontal',
captions: false,
pager: false,
minSlides:2,
maxSlides: 2,
moveSlides:2,
slideWidth: 100,
slideMargin: 10
});
$('.masterSlider').on('click', 'li', gotoSlide);
});
function gotoSlide() {
var idx = (parseInt($(this).data('slide')) + masterSlider.getSlideCount() - 2) % masterSlider.getSlideCount();
masterSlider.goToSlide(idx);
}
.masterSlider li {
width:200px;
height:100px;
background:#999;
}
ul{list-style-type:none;}
.mainDiv{width:700px;border:solid 2px red;}
*{margin:0; padding:0;}