JQuery Cycle plugin - pause / resume strange behavior

I have a slide show in which a plugin with a huge loop is running, and when you click a button in the show, I show a hidden layer on the page and send a pause command for the loop. I have two problems:

  • When the pause command is received, the loop immediately goes back to the 1st slide in the sequence (why?) And does not hit my callbacks before / after.

  • After closing the layer, I send the resume command to the loop. The slideshow resumes (from the first slide, where the pause left it), but now the loop does not call mine before / after callbacks at all, even as the slideshow advances.

So, I think, my question is: how to properly pause / resume the slide show so that these strange behaviors do not occur? (And to be completely clear and to avoid confusion, this is not about the “pause on hang” function, which actually works great for me. :-)

Here is my init loop () and my callback functions. (Why am I manually tracking nextSlide, you ask? Because the built-in value for the current slide is not updated properly for callbacks before / after.)

  $(document).ready(function() {
    $('#slideshow').cycle({
      fx: 'fade',        // choose your transition type, ex: fade, scrollUp, shuffle, etc...
        timeout:       4000,  // milliseconds between slide transitions (0 to disable auto advance)
        speed:         1000,  // speed of the transition (any valid fx speed value)
        pause:         1,     // true to enable "pause on hover"
        delay:         0,     // additional delay (in ms) for first transition (hint: can be negative)
        slideExpr:     'img',  // expression for selecting slides (if something other than all children is required)
        before:       moveArrow, // function to call when moving to next slide
        after:       upd, // function to call when moving to next slide
        fastOnEvent:   'fast',
    });
  });

  var nextSlide = 0;

  function upd(a, b, c) {
    nextSlide = nextSlide + 1;        // track which slide we're on
    c = $('#slideshow img').length;
    if(nextSlide > (c - 1)) nextSlide = 0;   // wrap back to 1st
  }

  // move indicator showing which slide we're on
  function moveArrow(a, b, c) {
    $('#slide-indicator').attr('class', 'c'+nextSlide);

    $(".clickmap").hide();          // hide other clickmaps
    $(".clickmap.c"+nextSlide).show();    // show map for this slide

    return true;
  }

Thanks for any thoughts on this -

better Eric

+3
source share
4 answers

I had the same problem, pause and resume did not work. It looks like I installed the Lite version with the full / full version in which it works.

+3

. - , reset - .

, . / - , -. "currSlide" "slideCount", .

0

, , . , , , - JQuery.

, , IMG, , , - , , - , .

, , ( "#banner" ) div, "-", , :

$('div#banner-container').hover(function(){
   if(!$(this).hasClass('paused')){
       $(this).addClass("paused");
       $('div#banner').cycle("pause")
   }
},function(){
   if($(this).hasClass('paused')){
       $(this).removeClass("paused");
       $('div#banner').cycle("resume")
   }
});
0

JQuery Cycle Plugin: "lite" /. .

EDIT: Sorry, I was wrong: I tried both versions, but had the same problem using the full version.

0
source

Source: https://habr.com/ru/post/1755427/


All Articles