slides with prev/next

by ataylor

HTML

<!-- start rotator -->
                <div id="rotator">
                                    <!-- start slide 1 -->
                                    <div class="slide">
                     <span style="font-size:36px; font-weight:bold; color:black;">Slide 1</span>
                                    </div>
                                    <!-- end slide 1 -->
                                    <!-- start slide 2 -->
                                    <div class="slide">
                     <span style="font-size:36px; font-weight:bold; color:green;">Slide 2</span>
                                    </div>
                                    <!-- end slide 2 -->
                                    <!-- start slide 3 -->
                                    <div class="slide">
                     <span style="font-size:36px; font-weight:bold; color:blue;">Slide 3</span>
                                    </div>
                                    <!-- end slide 3 -->
                                     <!-- start slide 4 -->
                                    <div class="slide">
                                        <span style="font-size:36px; font-weight:bold; color:red;">Slide 4</span>
                                    </div>
                                    <!-- end slide 4 -->
                    <!-- start rotator nav -->
                    <div id="rotator-nav">
                    <input type="button" class="button" id="next" value="Next" />
                    <input type="button" class="button" id="previous" value="Previous" />
                    </div>
                    <!-- end rotator nav -->
                </div>
                <!-- end rotator -->

CSS

* {
 position:relative;   
}

#rotator {
    width:400px;
    margin:50px auto;
    padding-bottom:50px;
}

#rotator .slide {
    width:100%;
    height:300px;
}

#rotator-nav {
 position:absolute;
width:100%:
height:50px;
bottom:0px;
 left:0px;   
}

JavaScript

//Set slides variable
var slides = $('#rotator .slide');
//Hide all slides
slides.hide();
//Show first slide
slides.eq(0).show();
//Set current slide to 0
var current = 0;
//Set total slides
var total = $('#rotator .slide').length();
//Subtract one to make up for zero index
total--;
//Set pause to false
var pause = false;
//If rotator is hovered over, set pause to true
if($('#rotator').hover()) { pause = true };
//Next slide function
function next_slide() {
    //Fadout current slide
    slides.eq(current).fadeOut('1000');
    //Make current slide next slide. If we are at the end make current slide the first slide.
    if(current === total){current = 0;}
    else{current++;}
    //Fade in next slide.
    slides.eq(current).fadeIn('1000');
}

//If not paused, go to next slide
function doRotate() {
    if (!pause) {
        next_slide();
    }
}
//Set slide speed to 5 seconds
setInterval(doRotate, 5000);