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.

So does it cycle at all, or just the autostop not working? Any JavaScript error is the dev console of your browser? Does it work in "raw HTML" mode, i.e. plain HTML without the Sitecore stuff? — jammykam, Mar 10 '14 at 15:55

jammykam · Accepted Answer · 2014-03-10T18:19:15.233

5

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);
});

edited Mar 10 '14 at 18:19

answered Mar 10 '14 at 17:42

jammykam

16,940
2
36
71

Trying out your example shortly, but fyi: http://jquery.malsup.com/cycle/end.html – Jeremy Mar 10 '14 at 18:02
@Jeremy So are you using Cycle(1) or Cycle2? Those are both different versions of the plugin and the API is different between them – jammykam Mar 10 '14 at 18:04
We are using Cycle2 (latest build). I just tried out the loop: 1. It runs through the slides, 1 > 2 > 3, then stops. This is almost there! I need it to stop only when it gets back to slide 1, not to stop at the last slide in the series. I am going to investigate this further as the solution is very promising. – Jeremy Mar 10 '14 at 18:07
@Jeremy I updated the code sample, untested but hopefully it helps – jammykam Mar 10 '14 at 18:20
Yep - that's what I just found too. Thanks much for the help. $('#my-slideshow').on('cycle-finished', function (e, opts, API) { $('#my-slideshow').cycle('goto', 0); }); – Jeremy Mar 10 '14 at 18:27

Cycle2 Autostop not working

1 Answers1