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

Question

我正在使用 idangero.us 滑块 ( http://www.idangero.us/sliders/swiper/index.php ) 来显示多个图像。当您将鼠标悬停在图像上时，我会显示一个显示“X 图像 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);   });