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

Question

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.

Answer 1

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/

Answer 2

You can find number of img with .length and then can hide next button.

check this fiddle

Answer 3

Here's an alternative I used for a Cycle2 slideshow with divs:

// flag slideshows with only a single slide by adding a "cycle-single" class
$('.cycle-slideshow').each(function( i ) { if( $(this).children('.cycle-slide').not('.cycle-sentinel').length <= 1 ) $(this).addClass('cycle-single'); });

This adds a cycle-single class to any .cycle-slideshow with only a single slide (or none). You can then do css rules based on .cycle-slideshow.cycle-single eg.

.cycle-slideshow.cycle-single + .cycle-next {
  display: none;
}

in the OP case. As long as the syntax is consistent this should work fine for multiple sliders per page.

Answer 4

Here you need add ID = slideshow to your code :

 <div id="slideshow" 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>

then use:

   $('#slideshow').on('cycle-initialized', function (e, opts) {
        if (opts.slideCount <= 1) {
            $(".cycle-next").css("opacity", 0);
        }
    });