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

Question

我正在使用idangero.us slider (http://www.idangero.us/sliders/swiper/index.php)来显示多个图像。当你将鼠标悬停在图像上时，我会显示一个DIV，上面写着“X的图像X”。这种方法是可行的，但总数总是错误的。我的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);   });