Cycle Backwards des diapositives

Question

je le jQuery suivant:

  var $active = $('#slideshow li.active'); 

      if ($active.length == 0) $active = $('#slideshow li:last'); 

      // use this to pull the images in the order they appear in the markup 
      var $next = $active.next().length ? $active.next() 
       : $('#slideshow li:first'); 

      // uncomment the 3 lines below to pull the images in random order 

      // var $sibs = $active.siblings(); 
      // var rndNum = Math.floor(Math.random() * $sibs.length); 
      // var $next = $($sibs[ rndNum ]); 


      $active.addClass('last-active'); 

      $next.css({opacity: 0.0}) 
       .addClass('active') 
       .animate({opacity: 1.0}, 500, function() { 
        $active.removeClass('active last-active'); 
       }); 

Comment puis-je modifier ce afin que je puisse le cycle en arrière?

Je suis si loin, mais il ne revient pas au dernier élément du premier. Il doit y avoir quelque chose d'assez simple qui me manque mais je n'arrive vraiment pas à le mettre en valeur.

  var $active = $('#slideshow li.active'); 

      if ($active.length == 0){ $active = $('#slideshow li:last');} 

      // use this to pull the images in the order they appear in the markup 
      var $next = 0 ? $active.prev() 
       : $('#slideshow li:first'); 

      // uncomment the 3 lines below to pull the images in random order 

      // var $sibs = $active.siblings(); 
      // var rndNum = Math.floor(Math.random() * $sibs.length); 
      // var $next = $($sibs[ rndNum ]); 


      $active.addClass('last-active'); 

      $next.css({opacity: 0.0}) 
       .addClass('active') 
       .animate({opacity: 1.0}, 500, function() { 
        $active.removeClass('active last-active'); 
       }); 

Answer 1

Les contrôles de solution currrent pour voir s'il y a un élément après l'élément active. Nous allons changer cela pour voir s'il y en a un avant l'élément active. Le repli original consiste à sélectionner le premier élément de liste au sein de #slideshow. Nous allons plutôt sélectionner le dernier.

var $next = $active.prev().length ? $active.prev() : $('#slideshow li:last'); 

Si vous n'êtes pas familier avec l'opérateur ternaire, il est essentiellement la même chose que d'une écriture instruction if:

// If there are previous elements 
if ($active.prev().length > 0) { 
    // The next element will be the previous element 
    $next = $active.prev(); 
} else { 
    // The next element will be the last list item in #slideshow 
    $next = $("#slideshow li:last"); 
}