jQuery slider - adding Next and Prev buttons

Question

Ok so I have used the same code to loop list items as an image slider on a timer and it has worked great. Now I want to add 'Next' and 'Prev' buttons to this to add to the user experience. I have looked around the stack, tried a few things and can't seem to come up with a solution to this.

First here is the HTML code:

<div class="container">
  <div class="tabs">
    <nav>
      <ul id="tabs">
        <li><a href="javascript:;" class='current'>Tab1</a></li>
        <li><a href="javascript:;">Tab1</a></li>
        <li><a href="javascript:;">Tab2</a></li>
        <li><a href="javascript:;">Tab3</a></li>
        <li><a href="javascript:;">Tab4</a></li>
        <li><a href="javascript:;">Tab5</a></li>
        <li><a href="javascript:;">Tab6</a></li>

      </ul>
    </nav>
  <!-- end .tabs -->
  </div>
  <div class="content">
    <div id="feature_list">
    <div id="prev" class="arrows prev"><a href="#">PREV</a></div>
        <ul id="output">
            <li><a href="#" target="_parent" class="corresp">Output1</a></li>
            <li><a href="#" target="_parent">Output2</a></li>
            <li><a href="#" target="_parent">Output3</a></li>
            <li><a href="#" target="_parent">Output4</a></li>
            <li><a href="#" target="_parent">Output5</a></li>
            <li><a href="#" target="_parent">Output6</a></li>
            <li><a href="#" target="_parent">Output7</a></li>
        </ul>
        <div id="next" class="arrows next"><a href="#">NEXT</a></div>
    </div>
    <!-- end .content -->
  </div>

Now ok the jQuery is next. But first I should explain, the code loops through the list with the id "tabs" starting with the first one adding and removing the class 'current' on each anchor tag. It then finds the corresponding item in the 'ouput' list and displays that output. Now here is the code:

<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>

<script type="text/javascript">
        (function($) {
            $.fn.featureList = function(options) {
                var tabs    = $(this);
                var output    = $(options.output);
                new jQuery.featureList(tabs, output, options);
                return this;    
            };
            //Loops through tab to next and displays cooresponding output
            $.featureList = function(tabs, output, options) {
                function slide(nextli) {
                    if (typeof nextli == "undefined") {
                        nextli = visible_item + 1;
                        nextli = nextli >= total_items ? 0 : nextli;
                        prevli = visible_item - 1;
                        prevli = prevli >= total_items ? 0 : prevli;
                    }

                    tabs.removeClass('current').filter(":eq(" + nextli + ")").addClass('current');

                    output.stop(true, true).filter(":visible").removeClass('cooresp').css({zIndex:10}).fadeOut();
                    output.filter(":eq(" + nextli + ")").addClass('cooresp').css({zIndex:15}).fadeIn(function() {
                        visible_item = nextli;    
                    });
                }

                var options            = options || {};
                var total_items        = tabs.length;
                var visible_item    = options.start_item || 0;

                options.pause_on_hover        = options.pause_on_hover        || true;
                options.transition_interval    = options.transition_interval    || 4000;

                output.hide().eq( visible_item ).show();
                tabs.eq( visible_item ).addClass('current');

                tabs.click(function() {
                    if ($(this).hasClass('current')) {
                        return false;    
                    }

                    slide( tabs.index(this) );
                });

                if (options.transition_interval > 0) {
                    var timer = setInterval(function () {
                        slide();
                    }, options.transition_interval);

                    if (options.pause_on_hover) {
                        tabs.mouseenter(function() {
                            clearInterval( timer );

                        }).mouseleave(function() {
                            clearInterval( timer );
                            timer = setInterval(function () {
                                slide();
                            }, options.transition_interval);
                        });
                    }
                }
            };
        })(jQuery);
    </script>
    <script language="javascript">
        $(document).ready(function() {
            $.featureList(
                $("#tabs li a"),
                $("#output li"), {
                    start_item    :    0
                }
            );
            var next = $("#feature_list #next a");
            var prev = $("#feature_list #prev a");
            var tabs = $('#tabs li a');
            next.click(function(){
                var tabli = $('#tabs li a.current');
                //var current = $('.selectoption li:visible');
                var output = $("#output li.cooresp");

                var currentli = $('#tabs li a.current');
                output.stop(true, true).css({zIndex:10}).fadeOut();
                output.prev().css({zIndex:15}).fadeIn(function() {
                        tabsli.prev('a').addClass('current'); 
                });
            });

            prev.click(function(){
                var tabli = $('#tabs li a.current');
                //var current = $('.selectoption li:visible');
                var output = $("#output li.cooresp");

                var currentli = $('#tabs li a.current');
                output.stop(true, true).css({zIndex:10}).fadeOut();
                output.prev().css({zIndex:15}).fadeIn(function() {
                        tabli.stop(true, true).removeClass('current');
                        $('#tabs li a').prev().addClass('current'); 
                });
            });     
        });
    </script>

What I have tried to do is make it so that when someone clicks the 'Next' button, the previous image is displayed. This works (though it may be a round-about way). The main problem in when trying to use the.prev and.next() functions I have failed to get the current class to move back or forward one as well. I want both lists to always be at the same number in their respective lists. If the 'current' class is at either:first or:last I would like it to loop around like it does on the timer.

If anyone can help I would greatly appreciate it. And if you need more info please just ask away. Thanks in advance!

EDIT

Ok so I tried taking out the next.click and putting it back into the main code area just under tabs.click:

                next.click(function() {
                    currentli = $('a.current');
                    nextli = currentli.parent().siblings().next('li').find('a');
                    console.log(currentli.parent().siblings().next('li').find('a'));
                    slide( tabs.index(nextli) );   
                });

This ALMOST works. The only problem is the variable 'nextli' is static and its value is determined only when the DOM loads. Not each time the next button is clicked? How do I get 'nextli' evaluated on each click?

Answer 1

Ok guys figured out my own answer to this. Not perfect according to JSLint, but it does almost exactly what I want it to do. Here is the answer I found for those of you that are interested:

(function($) {
    $.fn.featureList = function(options) {
        var tabs = $(this);
        var output = $(options.output);

        new jQuery.featureList(tabs, output, options);
        return this;
    };
    //Loops through tab to next and displays cooresponding output
    $.featureList = function(tabs, output, options) {
        function slide(nextli) {
            if (typeof nextli == "undefined") {
                nextli = visible_item + 1;
                nextli = nextli >= total_items ? 0 : nextli;
            }
            var futureli = nextli + 1;
            futureli = futureli >= total_items ? 0 : futureli;
            var pastli = nextli - 1;
            pastli = pastli >= total_items ? 0 : pastli;

            tabs.removeClass('current').filter(":eq(" + nextli + ")").addClass('current');
            tabs.removeClass('previous').filter(":eq(" + pastli + ")").addClass('previous');
            tabs.removeClass('nextup').filter(":eq(" + futureli + ")").addClass('nextup');

            output.stop(true, true).filter(":visible").removeClass('cooresp').css({
                zIndex: 10
            }).fadeOut();
            output.filter(":eq(" + nextli + ")").addClass('cooresp').css({
                zIndex: 15
            }).fadeIn(function() {
                visible_item = nextli;
                next_item = futureli;
                prev_item = pastli;
            });
        }

        function prevslide(nextli) {
            if (typeof nextli == "undefined") {
                nextli = visible_item - 1;
                nextli = nextli >= total_items ? (tabs.length -1) : nextli;
            }
            if ((nextli < 0)) {
                nextli = (tabs.length -1);
            }
            var futureli = nextli + 1;
            futureli = futureli >= total_items ? (tabs.length -1) : futureli;
            var pastli = nextli - 1;
            pastli = pastli >= total_items ? (tabs.length -1) : pastli;


            tabs.removeClass('current').filter(":eq(" + nextli + ")").addClass('current');
            tabs.removeClass('previous').filter(":eq(" + pastli + ")").addClass('previous');
            tabs.removeClass('nextup').filter(":eq(" + futureli + ")").addClass('nextup');

            output.stop(true, true).filter(":visible").removeClass('cooresp').css({
                zIndex: 10
            }).fadeOut();
            output.filter(":eq(" + nextli + ")").addClass('cooresp').css({
                zIndex: 15
            }).fadeIn(function() {
                visible_item = nextli;
                next_item = futureli;
                prev_item = pastli;
            });
        }

        var options = options || {};
        var total_items = tabs.length;
        var visible_item = options.start_item || 0;
        var next_item = (visible_item + 1) || 1;
        var prev_item = (visible_item - 1) || (tabs.length -1);
        var next = $('#feature_list #next a');
        var prev = $('#feature_list #prev a');
        var mainIMG = $("#output li");

        options.pause_on_hover = options.pause_on_hover || true;
        options.transition_interval = options.transition_interval || 6000;
        prev.pause_on_hover = prev.pause_on_hover || true;
        next.pause_on_hover = next.pause_on_hover || true;
        mainIMG.pause_on_hover = mainIMG.pause_on_hover || true;

        output.hide().eq(visible_item).show();
        tabs.eq(visible_item).addClass('current');

        tabs.click(function() {
            if ($(this).hasClass('current')) {
                return false;
            }
            slide(tabs.index(this));
        });
        findCurrentli = function(currentTag) {
            var currentli = currentTag;
            var nextli = currentli.parent().siblings().next('li').find('a');
            console.log(currentli.parent().siblings().next('li').find('a'));
            slide(tabs.index(nextli));
        };
        prev.click(function(e) {
            e.preventDefault();
            var prevli = $('#tabs li a.previous');
            var currentli = $('#tabs li a.current');
            var nextli = $('#tabs li a.nextup');
            console.log(prevli);
            currentli.addClass('nextup');
            currentli.parent().siblings().prev('li a').addClass('previous');
            prevslide(tabs.index(prevli));
        });
        next.click(function(e) {
            e.preventDefault();
            var prevli = $('#tabs li a.previous');
            var currentli = $('#tabs li a.current');
            var nextli = $('#tabs li a.nextup');
            currentli.addClass('previous');
            nextli.parent().siblings().next('li a').addClass('nextup');
            slide(tabs.index(nextli));
        });


        if (options.transition_interval > 0) {
            var timer = setInterval(function() {
                slide();
            }, options.transition_interval);

            if (options.pause_on_hover || prev.pause_on_hover || next.pause_on_hover || mainIMG.pause_on_hover) {
                tabs.mouseenter(function() {
                    clearInterval(timer);

                }).mouseleave(function() {
                    clearInterval(timer);
                    timer = setInterval(function() {
                        slide();
                    }, options.transition_interval);
                });
            }
        }
    };
})(jQuery);

Basically 'Next' button piggybacks on the slightly altered slide() function. For the 'Prev' button I made a copy of slide() and called it prevslide(). What the new function does is instead of finding the next list item, it finds the previous one and adds the 'current' class to the anchor tag. I also had to add in 'previous' and 'nextup' classes because in Firefox, after clicking on one of the tabs, the CSS of the 'current' class didn't go away until the timer cycled past it. If you can tell me how to get the pause_on_hover to work on the 'Next' & 'PREV' buttons please comment.