在Bxslider上设置moveSlides 2

时间:2018-05-18 01:20:19

标签: jquery bxslider

我已经制作了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/

0 个答案:

没有答案