我正在使用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
。这使得旋转木马卡到位,但效果非常难看。在我点击之前然后再点击之后,它就不再起作用了。
任何解决这个问题的想法都会非常感激。