image slider
Out of context: Reply #23
- Started
- Last post
- 26 Responses
- Nathan_Adams0
Daithi, I've done something similar before. The trick is to have a 'next page' link, but have it hidden. Use the onAfter callback to hide the 'next slide' link and show the 'next page' link, when you get to the last slide. (In my case, I made both links look exactly the same, so to the user it doesn't look like anything is changed).
Here's the script I used. Obviously change the selectors to suit.
$(function() {
$('#contentArea').cycle({
fx: 'fade',
timeout: 0,
next: '#nextSlide',
prev: '#prevSlide',
cleartype: 1,
after: onAfter
});
});function onAfter(curr,next,opts) {
var caption = (opts.currSlide + 1) + '/' + opts.slideCount;
$('.pageNumbers').html(caption);var index = opts.currSlide;
$('#prevSlide')[index == 0 ? 'hide' : 'show']();
$('#prevPage')[index == 0 ? 'show' : 'hide']();
$('#nextSlide')[index == opts.slideCount - 1 ? 'hide' : 'show']();
$('#nextPage')[index == opts.slideCount - 1 ? 'show' : 'hide']();
}