jquerycssapislideshowjquery-cycle

Hide "Next / Previous" navigation if there's only one slide using jQuery Cycle2 plugin

In the instance where there is only one slide in a slideshow, I would like to hide the "Next" control button (.cycle-next) which is being generated by the data-cycle-next attribute. I don't seem to have it working at the moment.

I have the following HTML (simply uncomment the img tags to test with different slide counts):

<div class="cycle-slideshow" 
   data-cycle-timeout="0" 
   data-cycle-next=".cycle-next" 
   >
   <img src="http://placehold.it/250x250" />
   <!--<img src="http://placehold.it/350x250" />-->
   <!--<img src="http://placehold.it/450x250" />-->
</div>
<div class="cycle-next">Next</div>

And my jQuery, based on the Cycle2 API:

$('.cycle-slideshow').on('cycle-initialized', function (e, opts, API) {
    if (opts.slideCount == 1) {
        $(".cycle-next").css("display", "none");
    }
});

Here is a fiddle too.

Can anyone identify what the problem may be, or suggest another solution to use? Thanks.

Solution

  • Is something like this what you're looking for? You could use the length attribute of the div element's children like this:

    var slides = $('.cycle-slideshow').children().length;
if(slides <= 1) {
    $('.cycle-next').css("display", "none");
} else {
    $('.cycle-next').css("display", "visible");
}
$('.cycle-slideshow').on('cycle-initialized', function (e, opts, API) {});

    example: http://jsfiddle.net/MCWvA/4/