Text Slider

HTML

<div id="slider">
    <div class="slide_container">
        <div class="slide">
            <p>Slide One</p>
        </div>
        <div class="slide">
            <p>Slide Two</p>
        </div>
        <div class="slide">
            <p>Slide Three</p>
        </div>
        <div class="slide">
            <p>Slide Four</p>
        </div>
        <div class="slide">
            <p>Slide Five</p>
        </div>
    </div>
    <div class="left_button">&lt;</div>
    <div class="right_button">&gt;</div>
</div>

CSS

#slider {
    width:300px;
    height:200px;
    overflow:hidden;
    border:1px solid #000;
    position:relative;
}
#slider .slide_container {
    height:200px;
}
#slider .slide {
    height:200px;
    float:left;
    text-align:center;
    background-color:#f1f1f1;
}
#slider .left_button {
    position:absolute;
    padding:5px;
    left:0px;
    top:90px;
}
#slider .right_button {
    position:absolute;
    padding:5px;
    right:0px;
    top:90px;
}

JavaScript

function instrumentSlider(slider) {
    var $slider = $(slider);
    var $slideContainer = $slider.find('.slide_container');
    var $slides = $slideContainer.children();
    var slideCount = $slides.length;
    var slideWidth = $slider.width();

    $slides.width(slideWidth);
    $slideContainer.width(slideWidth * slideCount);

    var currentSlide = 0;

    function animate() {
        $slideContainer.stop().animate({
            marginLeft: -(currentSlide * slideWidth) + 'px'
        }, 'slow');
    }

    $slider.find('.right_button').click(function () {
        currentSlide = (currentSlide + 1) % slideCount;
        animate();
    });

    $slider.find('.left_button').click(function () {
        currentSlide = (currentSlide - 1 + slideCount) % slideCount;
        animate();
    });
}

instrumentSlider('#slider');