jQuery fadeIn elements one at a time with onClick

Question

I'm trying to create a really basic slideshow where the user can click a back or next arrow to see the previous or next element. I have found various questions similar to this but they are automated transitions; I'm looking for the element to switch one at a time onclick. If next is clicked it should go forward, if back is clicked, it should go back. If someone clicks back from the first time, it should show the last; if they click Next when they're on the last one, it will go back to the first.

The code I have currently cycles through multiple elements. I'm new at this so I'm having trouble figuring out how to get it to go only one at a time. This has to work with jQuery 1.3.2, as the site I uses has that library loaded and we can't update it.

It doesn't have to be LI, could be div too if that's better for some reason. Any suggestions on how to achieve are appreciated.

here is a link to my fiddle, but basic HTML would be:

        <div id="arrow-next"></div>
        <div id="arrow-back"></div>

        <ul class="services">
            <li style="display: block;">slide 1</li>
            <li>slide 2</li>
            <li>slide 3</li>
            <li>slide 4</li>
            <li>slide 5</li>
            <li>slide 6</li>
        </ul>

css:

        ul.services li{
        height: 500px;
        width: 980px;
        border: 1px solid #ccc;
        text-align: center;
        list-style-type: none;
        position: absolute;
        top: 0;
        left: 0;
        display: none;
        background-color: #fff;
        }

        ul.services {
        display: inline-block;
        position: relative;
        }

jquery:

        $(document).ready(function() {
            $("#arrow-next").click(function() {
               $('ul.services li').fadeOut(function(){
                    $(this).next().fadeIn('slow');
                });
            });
            $("#arrow-back").click(function() {
               $('ul.services li').fadeOut(function(){
                    $(this).prev().fadeIn('slow');
                });
            });
        });

Thanks in advance for any help you can offer. I found this post and tried to update like so, but it does not change what happens with the code I already had.

            $(document).ready(function() {
                $("#arrow-next").click(function() {
                   $('ul.services li').fadeOut(function(){
                        $(this).next().fadeIn('slow', function(){
                        $(this).prev().fadeOut('slow');
                    });
                    });
                });
                $("#arrow-back").click(function() {
                   $('ul.services li').fadeOut(function(){
                        $(this).prev().fadeIn('slow');
                    });
                });
            });

Answer 1

something like this?

$(document).ready(function () {
    $("#arrow-next").click(function () {
        $('ul.services li:visible').fadeOut(function () { //select only the visible element
            var $next = $(this).next(); //get the next element
            var $target = $next.length ? $next : $('ul.services li:first'); //if there is no next then switch the pointer to point to the first one.
            $target.stop(true,true).fadeIn('slow'); //now fadeIn the target element.
        });
    });
    $("#arrow-back").click(function () {
        $('ul.services li:visible').fadeOut(function () {
            var $prev = $(this).prev(); //get the prev element
            var $target = $prev.length ? $prev : $('ul.services li:last');//if there is no next then switch the pointer to point to the last one.
            $target.stop(true,true).fadeIn('slow');//now fadeIn the target element.
        });
    });
});

Fiddle