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!

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!

• javascript
• jquery
• plugins

3 Answers 3

The approach remended by the plugin author is to hide the buttons using Javascript:

http://forum.jquery./topic/cycle-plugin-hide-prev-next

Problem solved and I feel like an idiot for missing it, You have to set the display of the arrows to none initially.

Shouldn't it already work? If you only have one slide then your onAfter function should take care of it. With one slide your index is always 0. Your opts.slideCount - 1 would also be zero because you would have one slide minus one.

Edit:

But as stated below, onAfter may need to be called after the page loads because when dealing with one slide the function may not be getting called.