Question

I have the following jQuery:

            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');
                });

How do I modify this so that I can cycle backwards?

I’ve got this far, but It doesn’t cycle back to the last element from the first. There’s got to be something rather simple I’m missing but I really just can’t put my finger on it.

            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

The currrent solution checks to see if there is an element after the active element. We’ll change this to see if there is one before the active element. The original fallback is to select the first list-item within #slideshow. We will instead select the last.

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

If you’re not familiar with the ternary operator, it’s essentially the same thing as writing an if-statement:

// 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");
}