Geek asks and answers

JQuery Loop with current / full slide

I would like to create a jQuery Cycle slide show paginated in the format "current_slide / total_slides" as shown here

I assume I am using pageAnchorBuilder to display the current and full slide numbers, and then onAfter to update the current slide number?

Can anyone help with this? Thank!

+3
source share
2 answers

I recommend using the jQuery Cycle plugin. Imagine the slides are an unordered list:

<ul id="slides">
    <li class="slide">...</li>
    ...
</ul>
<a id="prev">&gt;</a><span id="counter">1 / 1</span><a id="next">&lt;</a>

You can get the total number of slides just by calling:

var total = $('#slides').children().length;

Then we need to update the counter after changing the slides:

$('#slides').cycle({
    after: function(i){
            var currentSlideNo = $(i).index();
            $('#counter').text(currentSlideNo+' / '+total);
        },
    prev: $('#prev'),
    next: $('#next')
});
+5
source

-, jquery .

 after: function(currSlideElement, nextSlideElement, options, forwardFlag) {

    $('#counter').text((options.currSlide + 1) + '/' + (options.slideCount));
 }

jsfidde: http://jsfiddle.net/lucuma/Dhqdc/2/

+4

More articles:


All Articles