Can I show numbers in jQuery Cycle

Question

I mostly use jQuery Cycle for banner rotator, but in current work, it is required to show numbers in jQuery cycle. So is it possible to do so? If yes then how? I didn't see any such thing in documentation of jQuery Cycle and also didn't see such numbering in any demo of it.

I would rather use this plugin with numbers instead of exploring and using some other plugin.

Answer 1

Here's the documentation from the Cycle Plugin to use the Pager: Cycle Pager - http://jquery.malsup.com/cycle/pager.html

Answer 2

You certainly can. jQuery Cycle is a well-designed plugin and it has functions you can use as callbacks that happen before and after slide transitions. Just use the before callback to get the number of the current slide and do something with it.

Live example: http://jsfiddle.net/5ZqFA/

var $slideshowImages = $('.slideshow img'),
    $number = $('#number');

$('.slideshow').cycle({
    fx: 'fade',
    startingSlide: 0,
    before: function (currSlideElement, nextSlideElement, options, forwardFlag) {

        var $img = $(nextSlideElement),
            number = $slideshowImages.index($img);

        number += 1;

        $number.text(number);
    }
});​

The options for the plugin are documented here: http://jquery.malsup.com/cycle/options.html