CODEWITHSUNDEEP
javascriptjqueryslideshow
whatyouhide
whatyouhide

Reputation: 16781

jQuery Cycle plugin - forwards/backwards slideshow

I need to do a slideshow which doesn't cycle, but actually bounces between the slides: e.g., if I have 3 slides I want the slides sequence to be:

1 -> 2 -> 3 -> 2 -> 1 -> 2 ...

I came up with this solution (using jQuery Cycle version 1):

  var $ss = $('#slideshow');

  var slideOpts = {
    pause: 1,                           // pause when hovering the slide
    timeout: 500,                       // time between each transition
    pager: '#slideshow-nav',            // nav container
    nowrap: 1,                          // don't wrap when the slideshow is over
  };

  function forwardsSlideshow() {
    console.log('called forwardsSlideshow');

    $ss.cycle('destroy');
    $ss.cycle($.extend({}, slideOpts, {
      end: function () {
        console.log('ended forward');
        backwardsSlideshow();
      }
    }));
  }
  function backwardsSlideshow() {
    console.log('called backwardsSlideshow');

    $ss.cycle('destroy');
    $ss.cycle($.extend({}, slideOpts, {
      end: function () {
        console.log('ended backwards');
        forwardsSlideshow();
      },
      backwards: true
    }));
  }
  forwardsSlideshow();

I know this can be super-refactored, but why doesn't it work? The sequence of console logs printed out is:

called forwardsSlideshow
ended forward
called backwardsSlideshow
ended backwards // BUT here it doesn't go backwards, it just starts over with forwardsSlideshow()
called forwardsSlideshow

It's like it calls the end function I pass on to cycle right when it's forwards, but as soon as it starts when it's backwards.

Any ideas?

Upvotes: 1

Views: 122

Answers (1)

Bryan
Bryan

Reputation: 1453

Looks like the problem is in the plugin, and not in your implementation. If you are using the version here: http://malsup.github.io/jquery.cycle.all.js you will have to update the following block of code. (line #641)

Change this

if (!manual && !p.cyclePause && !opts.bounce &&
    ((opts.autostop && (--opts.countdown <= 0)) ||
    (opts.nowrap && !opts.random && opts.nextSlide < opts.currSlide))) {

To This:

if (!manual && !p.cyclePause && !opts.bounce &&
    ((opts.autostop && (--opts.countdown <= 0)) ||
    ((fwd && opts.nowrap && !opts.random && opts.nextSlide < opts.currSlide) ||
    (!fwd && opts.nowrap && !opts.random && opts.currSlide < opts.nextSlide)))) {

The reason it wasn't working is that this is called in the go() function which is what transitions to the next slide. It wasn't checking if it was going fowards or backwards, and therefore, opts.nextSlide < opts.currSlide would always be true.

Upvotes: 1

Related Questions