javascript - Cycle2 Autostop not working -
for recent project, using cycle2. i've upgraded latest version. using sitecore render content. no matter approach take (below), cannot autostop function. have 2-3 slides per slideshow, , want move in following pattern: 1-2-3-1.
whether render autoplay in rules 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 have play programmatically in js without "cycle-slideshow" class:
$('#my-slideshow').cycle({ speed: 3000, autostop: true, timeout: 5000, end: function() { $('#my-slideshow').cycle('stop'); } });
- we loading jquery.
- i have tried both 'true' , '1' autostop after doing research o functionality.
- we using carousel , swipe cycle2 libraries.
- we loading following libraries @ same time: fancybox 2.1.4, enquire, imagesloaded jquery.ba-resize, jquery.qtip, jquery.rwdimagemaps, slimscroll, , modernizer.
- it cycles normally. can stop inline based on capturing changes of viewport, standard autostop not work. here quick concole log capture (same between ie, ff, , 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 demonstrating identical behavior in raw html mode static content
- additionally, i've run js launches page through js lint.
any / suggestions appreciated. time.
assuming using cycle2 plugin malsup, documentation api not contain option called autostop
. perhaps mean loop
option?
loop
integer
0
number of times auto-advancing slideshow should loop before terminating. if value less 1 slideshow loop continuously. set 1 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 first slide when loop has finished // might have use settimeout() delay transition first slide $slideshow.on('cycle-finished', function(event, opts) { $slideshow.cycle('goto', 0); });
Comments
Post a Comment