Добавление предыдущей навигации к элементам списка

Попробуйте сделать это более общим:

 var 
        $listItems = $("#site_slideshow_inner_text").children('li'),
        fadeDuration = 300,
        interval;
    $listItems.not(':first').hide();

    function showSlide(elm) {
        //fadeout the visible one and fade in the element passed to the function
        $listItems.filter(':visible').fadeOut(fadeDuration, function () {
            elm.fadeIn(fadeDuration);
        });
    }

    function autoSlide() {
    //auto slide is set up to go forward
        interval = setInterval(function () {
            showSlide( getNextElement('next'));
        }, 1000);
    }

    $('#prev, #next').on('click', function () {
        stopAutoSlide(); //stop auto slide 
        showSlide(getNextElement(this.id)); //Get next element by passing in prev/next as argument which are the id of the element itself.
    });


    //Here is the major section that does all the magic of selection the element
    function getNextElement(direction) {
    //Here direction will be prev or next they are methods on jquery to select the element, so it will select correspoding element by executing that specific function i.e next() or prev(). 
     // Also set up a fallback if there is no element in  next or prev you need to go to last or first and execute it.
        var $next = $listItems.filter(':visible')[direction](), 
            fallBack = (direction === 'prev' ? 'last' : 'first');
        return !$next.length ? $listItems[fallBack]() : $next;

    }

    function stopAutoSlide() {
        $listItems.stop(true, true, true); //just clean up the animation queues
        clearInterval(interval); //clear the interval
    }

    autoSlide(); //Kick off auto slide

демонстрация