Cycle2 Autostop not working

Question

For a recent project, we are using Cycle2. I've upgraded to the latest version. We are using Sitecore to render content. No matter the approach I take (below), I cannot get autostop to function. We have 2-3 slides per slideshow, and we want it to move in the following pattern: 1-2-3-1.

Whether we render it to autoplay in rules like this:

<ul class="<%# Sitecore.Context.PageMode.IsPageEditor ? String.Empty : "cycle-slideshow" %> interior" 
                data-cycle-speed="3000" 
                data-cycle-autostop="true"
                data-cycle-timeout="5000" 
                data-cycle-auto-height="container"
                data-cycle-slides="> li" >
                <sc:Placeholder  runat="server" ID="SlidePlaceholder" Key="SlidePlaceholder" /></ul>

Or if we have it play programmatically in JS without the "cycle-slideshow" class:

$('#my-slideshow').cycle({
    speed: 3000,
    autostop: true,
    timeout: 5000,
    end: function() {
        $('#my-slideshow').cycle('stop');
    }
});

• We are properly loading JQuery.
• I have tried both 'true' and '1' for autostop after doing some research o the functionality.
• We are also using the Carousel and Swipe Cycle2 Libraries.
• We are loading the following libraries at the same time: fancybox 2.1.4, enquire, imagesloaded jquery.ba-resize, jquery.qtip, jquery.rwdImageMaps, Slimscroll, and modernizer.
• It cycles normally. We can get it to stop inline based on capturing changes of the viewport, but the standard autostop does not work. Here is a quick concole log capture (same between IE, FF, and Chrome)
• [cycle2] --c2 init-- jquery.cycle2.min.js:6
• [cycle2] speed: 3000 (number) jquery.cycle2.min.js:6
• [cycle2] autostop: true (boolean) jquery.cycle2.min.js:6
• [cycle2] timeout: 5000 (number) jquery.cycle2.min.js:6
• [cycle2] autoHeight: container (string) jquery.cycle2.min.js:6
• [cycle2] slides: > li (string) jquery.cycle2.min.js:6
• It is demonstrating identical behavior in Raw HTML mode with static content
• Additionally, I've run all the JS that launches with the page through JS Lint.

Any help / suggestions are appreciated. Thanks for your time.

Answer 1

Assuming you are using the Cycle2 plugin by Malsup, then the documentation for the API does not contain an option called autostop. Perhaps you mean the loop option?

loop

integer
0
The number of times an auto-advancing slideshow should loop before terminating. If the value is less than 1 then the slideshow will loop continuously. Set to 1 to loop once, etc.

So either:

 <ul ... data-cycle-loop="1" .. /></ul>

or

var $slideshow = $('#my-slideshow');
$slideshow.cycle({
    speed: 3000,
    loop: 1,
    timeout: 5000
});

// jump back to the first slide when loop has finished
// you might have to use setTimeout() to delay the transition back to the first slide
$slideshow.on('cycle-finished', function(event, opts) {
    $slideshow.cycle('goto', 0);
});