Search code examples
jqueryjquery-cycle2

Cycle2 play after being paused


I'm using cycle 2 and am having trouble getting cycle to start again. I have a group of divs. One of which is wrapping a video and the other two have images. My parent wrapper has the following:

<div id="hero-wrapper" class="cycle-slideshow"
   data-cycle-fx="scrollHorz"
   data-cycle-timeout="0"
   data-cycle-prev="#prev"
   data-cycle-next="#next"
   data-cycle-slides="> div"
   >

I have some js to bind the end of the video:

$(document).ready(function(e) {
$("#hero-video_html5_api").bind("ended", function() {
 $('.cycle-slideshow').cycle('next');

This does call the next slide after the video plays. However, it does not continue to cycle. It stops here. I tried adding 'reinit', 'resume', etc. However, none of those seem to make the slideshow continue. Any thoughts?


Solution

  • Try this:

    • Set data-cycle-paused to true
    • Set data-cycle-timeout to 5000 or some other reasonable value
    • May be set data-cycle-loop to 1 so that it stops after last slide

    This will create the slideshow in paused state on page load. You can resume it when necessary using .cycle("resume") in which case the timeout and loop settings will work as expected.