jQuery - Making my own slider?

Question

I'm still learning jQuery, and I know that what I'm asking is probably quite redundant as there are hundreds of sliders out there already that will be much better than the final outcome of mine.

However, I'm trying to learn by doing and I set myself the task of making a slider, so any help you can give me would be great!

Here's what I have so far: http://jsfiddle.net/eLgBG/

$(document).ready(function() {

    $('.thumb').click(function(event){
        var idAttr = $(this).attr('rel');


        $('.thumb').removeClass('active');  
        $(this).addClass('active');


        $('.banner').hide("slide", {direction: "left"}, 500);
        $('.banner-' + idAttr).show("slide", {direction: "right"}, 500);


        if($('.thumb').hasClass('active')){
            return false;
        }


    })
}); 

The main things I'd like to achieve:

• When you click a thumbnail to go back to a previous slide, the slider goes backwards instead of forwards.
• The Second Slide doesn't come in straight away, for some reason it shows white first? The rest don't do this though which is weird

• When you click a tab that is already active, I don't want it to do anything. I've tried to fix this one but I can't get it to work

   if($('.thumb').hasClass('active')){ return false; }

Any help would be great, thank you!! :)

Answer 1

This will fix your 1st and 3rd bullet:

http://jsfiddle.net/H9tJc/1/

Basically, the trick is to store the current slide:

$(document).ready(function() {
        var currentRel = -1;

        $('.thumb').click(function(event){
            var idAttr = $(this).attr('rel');

            $('.thumb').removeClass('active');  
            $(this).addClass('active');

            if(parseInt(idAttr)>currentRel) {
                $('.banner').hide("slide", {direction: "left"}, 500);
                $('.banner-' + idAttr).show("slide", {direction: "right"}, 500);
            }
            else if(parseInt(idAttr)<currentRel) {
                $('.banner').hide("slide", {direction: "right"}, 500);
                $('.banner-' + idAttr).show("slide", {direction: "left"}, 500);
            }

            currentRel = parseInt(idAttr);

        })
    });