Question

我使用idangero.us滑块（http://www.idangero.us/sliders/swiper/index.php）来显示多个图像。当您将鼠标悬停在图像上时，我会显示一个说明＆＃34; X＆＃34;的图像X的DIV。这种作品，但总计数总是错误的。我的javascript代码是

var mySwiper = new Swiper('.swiper-container',{
    mode:'horizontal',
    loop: true,
    speed: 600,
    autoplay: 5000,
    autoResize: true,
    preventLinks: true,
    calculateHeight: true,
    grabCursor: true,
    pagination: '.pagination',
    paginationClickable: true,
    onSlideChangeEnd: function () { 
       $(".start_index").html(mySwiper.activeIndex)
    }
})

$(".start_index").html("1")
$(".end_index").html(mySwiper.slides.length)

在我的swiper-container div中，我有以下内容应该在幻灯片移动时更新：

<div class="ImageIndex">
    Image <span class="start_index">2</span> of <span class="end_index">3</span>
</div>

有没有人做过这样有帮助的事情？

Answer 1

var pressSwiper = new Swiper('.press-container', {
    mode : 'vertical',
    slideClass : 'press-slide',
    wrapperClass : 'press-wrapper',
    calculateHeight : true,
    watchActiveIndex: true,
    onSlideChangeEnd: function () { 
        $(".presSlidesActive").text(pressSwiper.activeIndex +1);
    }
});



$( ".pressArrow.prev" ).click( function() { pressSwiper.swipePrev();   });
$( ".pressArrow.next" ).click( function() { pressSwiper.swipeNext();   });

$(".presSlidesActive").text("1");
$(".presSlidesFrom").text(pressSwiper.slides.length);

$( ".pressArrow.veryPrev" ).click( function() { pressSwiper.swipeTo(0);   });
$( ".pressArrow.veryNext" ).click( function() { pressSwiper.swipeTo(pressSwiper.slides.length-1);   });

idangero.us滑块当前幻灯片和最大幻灯片

1 个答案: