Я сделал 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;}
Вот демоверсия http://jsfiddle.net/4ktkmfdL/53/