jQuery bxSlider Carousel - 最后一张幻灯片上的动画不正确

时间:2015-01-08 15:18:41

标签: javascript jquery bxslider

我正在使用bxSlider进行这些设置:

var slider = jQuery('#carousel').bxSlider({
    slideWidth: 400,
    slideMargin: 25,
    maxSlides: 3,
    moveSlides: 1,
    useCSS: false,
    controls : true,
    nextText : "<span class=\"icon-arrowright\"></span>",
    prevText : "<span class=\"icon-arrowleft\"></span>",
    infiniteLoop: false,
    hideControlOnEnd: true,
    touchEnabled: true,
    responsive: true,
    pager: false,
)};

总共我有至少3张幻灯片和最多6张幻灯片。我遇到的问题是最后一张幻灯片移动不正确。第一张幻灯片由-425px (slideWidth+slideMargin)左移。但是,最后一张幻灯片仅向-800px移动,而不是-850px。现在,如果我关闭或打开Firefox(我认为重新初始化页面上的javascript),轮播最后一张幻灯片会自动捕捉到-850px

所以,我想:让我们识别lastSlide并将幻灯片向左移动-50px:

onSlideAfter: function() {
    var total = Math.ceil(slider.getSlideCount()/3);
    var current = slider.getCurrentSlide();
    var lastslide = Math.ceil(total / current);
    var text = 'it works';
       if (current == total) { // Last slide
           jQuery('#carousel #post-sticky:first-of-type').css('margin-left','-50px');
           console.log(text); // this shows on the last-slide but the code above does move the slide;
       }
    }

现在,当我到达最后一张幻灯片时会出现console.log文本,但幻灯片不会向左移动。我接下来要做的是在slider.redrawSlider();语句中加入if。这使得旋转木马卡到位,但效果非常难看。在我点击之前然后再点击之后,它就不再起作用了。

任何解决这个问题的想法都会非常感激。

0 个答案:

没有答案