JQuery Cycle 2: how to show the index of the first slide correctly? -

i use jquery cycle 2 , need show index of slide when displayed.

here html:

 <div id="slideshow"  data-cycle-auto-height="container" data-cycle-slides="> div"  >     <div>slide 1</div>     <div>slide 2 </div>     <div>slide 3 </div>     <div>slide 4</div> </div> <div id="caption"></div> 

here javascript:

$('#slideshow').cycle({     delay: 0 });  $('#slideshow').on('cycle-before', function (e, optionhash, outgoingslideel, incomingslideel, forwardflag) {     var caption =  (optionhash.currslide + 1) + ' of ' + optionhash.slidecount;     $('#caption').html(caption); }); 

here fiddle demo:

http://jsfiddle.net/mddc/kkd9s/1/

the problem when @ page load first slide displayed, event "cycle-before" not fired , first slide seems treated @ last one.

what did wrong?

thanks!

the 'cycle-before' event fires before transition happens. when initialize slideshow, there no transition, never called.

also, since 'cycle-before' event gets fired before change of slide, optionhash.currslide previous slide, , since 0-indexed, 1 behind.

to fix these issues, change cycle-before event cycle-update-view event, gets fired after slide has been updated, , called after cycle initialized:

$('#slideshow').on('cycle-update-view', function (e, optionhash, slideoptionshash, currslideel) {     var caption = 'image ' + (optionhash.currslide + 1) + ' of ' + optionhash.slidecount;     $('#caption').html(caption); }); 

here fiddle of working: http://jsfiddle.net/zy4ur/2/