show previous slide instead of next on jquery carousel

Question

If you go to this link : http://hutchcreative.co.uk/rod/, you can see a live version of the carousel.

I have set up left and right green buttons on each side of the screen. However I want left one to cycle to the last/previous slide instead of the next slide. Im not sure how to edit the jquery to achieve this.

Here is the whole jquery just incase more is needed.

jQuery( document ).ready( function( $ ) {

var wind = $( window ),
    html = $( "html" ),
    touch = html.hasClass( "touch" ),
    ie8 = html.hasClass( "ie8" ),
    ie = html.hasClass( "ie" ),
    picks = $( "#picks" ),
    li = picks.find( "li" ),
    skip = picks.find( ".skip" ),
    hold = true,
    interval

li
.eq( 0 )
.addClass( "current" )

ph_picks_autocolor()

li
.imagesLoaded()
.progress( function( e, i ) {

    if ( ie8 )
        return

    $( i.img )
    .parents( "li" )
    .css( "background-image", "url(" + i.img.src + ")" )    

} )
.always( function() {

    picks.addClass( "ready" )

    ph_picks_release()

} )

function ph_picks( side ) {

    if ( hold )
        return

    hold = true,
    current = li.filter( ".current" )

    if ( side == "next" ) {
        next = current.next( "li" ).length ? current.next( "li" ) : li.eq( 0 )          
    }
    else {
        next = current.prev( "li" ).length ? current.prev( "li" ) : li.filter( ":last" )
    }   

    current.removeClass( "current" )

    next.addClass( "current" )

    ph_picks_autocolor( next )

    ph_picks_release()

}

function ph_picks_auto() {

    if ( interval )
        clearInterval( interval )

    interval = setInterval( function() {

        ph_picks( "next" )

    }, 10000 )

}

function ph_picks_release() {

    if ( ie ) {

        hold = false

        ph_picks_auto() 

    }
    else {

        setTimeout( function() {

            hold = false

            ph_picks_auto() 

        }, 800 )    

    }

}

function ph_picks_autocolor( current ) {

    current = current ? current : li.filter( ".current" )

    skip.css( "border-color", current.children( "article" ).css( "color" ) )

}

wind.on( "keydown", function( e ) {

    if ( e.keyCode == 39 || e.keyCode == 37 ) {

        ph_picks( e.keyCode == 39 ? "next" : "prev" )

        e.preventDefault()

    }

} )

if ( ! touch ) {

    skip.on( "click", function( e ) {

        ph_picks( "next" )

        e.preventDefault()

    } )

}
else {

    picks
    .hammer()
    .on( "dragstart", function( e ) {

        e.gesture.preventDefault()

    } )
    .on( "dragend", function( e ) {

        var i = e.gesture

        if ( i.distance < 40 )
            return

        if ( i.direction == "left" ) {
            ph_picks( "next" )              
        }
        else if ( i.direction == "right" ) {
            ph_picks( "prev" )
        }

    } )

    skipLeft = picks.find("#skipLeft"),
    skipRight = picks.find("#skipRight")

    skipLeft
.hammer()
.on( "tap", function( e ) {

    ph_picks( "prev" )

    e.gesture.preventDefault()

} )
skipRight
    .hammer()
    .on( "tap", function( e ) {

        ph_picks( "next" )

        e.gesture.preventDefault()

    } )

    /*skip
    .hammer()
    .on( "tap", function( e ) {

        ph_picks( "next" )

        e.gesture.preventDefault()

    } )*/

}   

} );

Here is my HTML

<div id="picks" class="fit">

    <?php if ( count( $i ) > 1 ) : ?>

    <!-- next -->
    <span id="skipLeft" class="skip"></span>
    <span id="skipRight" class="skip"></span>

    <?php endif; ?>

    <!-- items list -->
    <ul>

        <?php foreach ( $i as $item ) : ?>

        <!-- item -->
        <li id="<?php esc_attr_e( $item->id ); ?>">

            <?php if ( $item->title || $item->caption || $item->link->url ) : ?>

            <!-- info -->
            <article <?php if ( $item->alignment ) echo 'class="' . esc_attr( $item->alignment ) . '"'; ?> <?php if ( $item->color ) echo 'style="color: ' . esc_attr( $item->color ) . ';"'; ?>>

                <!-- title -->
                <h2 class="cover-title"><?php echo $item->title; ?></h2>


                <?php if ( $item->title || $item->caption ) : ?>



                <?php endif; ?>

                <!-- excerpt -->
                <span>

                    <p class="caption"><?php echo do_shortcode( $item->caption ); ?></p>

                    <?php if ( $item->link->url ) : ?>

                    <a href="<?php echo esc_url( $item->link->url ); ?>" class="action"><?php echo ( $i = $item->link->label ) ? $i : __( 'Explore Set', 'openframe' ); ?></a>

                    <?php endif; ?>

                </span>
                <!-- end: excerpt -->

            </article>
            <!-- info -->

            <?php endif; ?>

            <!-- image -->
            <img src="<?php RodTheme_get_media_url( $item->media, 'full' ); ?>" alt="<?php esc_attr_e( $item->id ); ?>" />

        </li>
        <!-- end: item -->

        <?php endforeach; ?>

    </ul>
    <!-- end: items list -->

    <!-- loading -->
    <span class="wait"><?php _e( 'Loading..', 'openframe' ); ?></span>

</div>

Thanks!

Answer 1

You define skip as

skip = picks.find( ".skip" ),

which picks up both buttons

   <span id="skipLeft" class="skip"></span>
   <span id="skipRight" class="skip"></span>

and then your handler for them, does a next

  skip
    .hammer()
    .on( "tap", function( e ) {

        ph_picks( "next" )

        e.gesture.preventDefault()

    } )

So add a var for skipLeft and one for skipRight

skipLeft = picks.find("#skipLeft"),
 skipRight = picks.find("#skipRight")

then add a handler for each

skipLeft
    .hammer()
    .on( "tap", function( e ) {

        ph_picks( "pref" )

        e.gesture.preventDefault()

    } )
skipRight
    .hammer()
    .on( "tap", function( e ) {

        ph_picks( "next" )

        e.gesture.preventDefault()

    } )

I missed the nontouch code. It'll need to be modified also to handle the skipLeft and skipRight instead of just skip

if ( ! touch ) {

        skip.on( "click", function( e ) {

            ph_picks( "next" )

            e.preventDefault()

        } )

    }