I'm using the jQuery cycle plugin to cycle through multiple divs in a container. All is working well the only functionality that I would like to add that I can't seem to find an option for with in the plugin is the ability to hide both buttons if there is only one slide present with in the container. My current code is this:
//Goal summary page cycler
$('#showGoal').after('<div id="nav">')
.cycle({
fx: 'scrollHorz',
speed:300,
prev: '#goalPrev',
next: '#goalNext',
timeout: 0,
pager: '#nav',
after: onAfter,
pagerAnchorBuilder: function(idx, slide) {
return'<a href="#"></a>';
}
});
// call back to remove buttons on first and last slide / adjust height of container
function onAfter(curr, next, opts, fwd) {
var index = opts.currSlide;
$('#goalPrev')[index == 0 ? 'hide' : 'show']();
$('#goalNext')[index == opts.slideCount - 1 ? 'hide' : 'show']();
//get the height of the current slide
var $ht = $(this).height();
//animates the container's height to that of the current slide
$(this).parent().animate({ height: $ht });
}
I'm guessing I can either check the index and remove them both that way or possibly do something along the lines of an if statement for example (pseudo code) :
var index = this.index();
var numOfSlides = 0;
if ( numOfSlide < index ) {
//hide the buttons
}
else
{
//show the buttons
}
Thanks for any possible help with this!