Creating my own slider

Question

This is more like a homework done for myselft and to myself.

It will be useful and i need to practice, so i was wondering on how can i create a valid slider using javascript (jquery mostly)

jsFiddle : http://jsfiddle.net/htArE/

I have 3 divs, and i'm trying to put only one with red borders at a time:

This is what i've got so far:

<div id="slidez0" class="active">slider 1</div>
<div id="slidez1" class="inactive">slide 2</div>
<div id="slidez2" class="inactive">slide 3</div>​

setInterval(slider(), 2000);


function slider(){
    for (i=0; i<3; i++){
        if($('#slidez'+i).hasClass('1')){
               $('#slidez'+i).css('border','solid 1px red');
               $('#slidez1').css('border','solid 1px white');
               $('#slidez2').css('border','solid 1px white');
        }else if($('#slidez'+i).hasClass('2')){
               $('#slidez'+i).css('border','solid 1px red');
               $('#slidez0').css('border','solid 1px white');
               $('#slidez2').css('border','solid 1px white');
        }else if($('#slidez'+i).hasClass('3')){
               $('#slidez'+i).css('border','solid 1px red');
               $('#slidez0').css('border','solid 1px white');
               $('#slidez1').css('border','solid 1px white');
        }
        break;
    }
}

jsFiddle : http://jsfiddle.net/htArE/

Actually, i don't know what to do in the function slider, i have three sliders, so they will alternate classes like this (1 for active, 0 for inactive):

1 0 0  - first slider active;
0 1 0  - after setInterval, second slider active, first inactive;
0 0 1  - after another setInterval, third slider active, first and second inactive;

1 0 0  - Restart slider, first slider active, other inactive;

​IF you don't understand something on my question, please comment bellow so i can edit.

Thank you very much!!!

Answer 1

If you're using jQuery, you should set it up as a jQuery plugin. Follow this tutorial , they follow good practices.

http://net.tutsplus.com/articles/news/how-to-build-a-simple-content-slider-jquery-plugin/

Answer 2

You can see the solution below working at: http://jsfiddle.net/htArE/4/

The javascript...

var slide = $('.slide'),
    count = 0,
    max_count = slide.length - 1,

    slideIt = function slideIt() {
        slide.removeClass('selected').eq(count).addClass('selected');
        count = ++count > max_count ? 0 : count;
        setTimeout(slideIt, 2000);
    };

    slideIt();

... for the html...

<div class="slide selected">slide 1</div>
<div class="slide">slide 2</div>
<div class="slide">slide 3</div>

... and css...

.slide {
    float: left;
    width: 50px;
    height: 20px;
    border: 1px solid transparent;
}

.selected {
    border: 1px solid red;
}

ASIDE

It was taking me too long to write the explanation to the code for some weird reason, so I just gave up. I'll instead post a simplified version of it below, and hopefully you'll understand it that way.