jQuery.DIYSlider demo

More information, documentation and download on the project's page : http://pioul.fr/jquery-diyslider/

HTML

<script src="http://pioul.fr/ext/jquery_diyslider/jquery.diyslider.1.0.min.js"></script>
            <div class="items slider">
                <div>
                    <div class="item_box left">
                        <h4>1</h4>
                        <p>Principal</p>
                    </div>  
                    <div class="item_box left">
                        <h4>2</h4>
                        <p>Partner</p>
                    </div>
                    <div class="item_box left">
                        <h4>3</h4>
                        <p>Director</p>
                    </div>
                    <div class="item_box left">
                        <h4>4</h4>
                        <p>Principal</p>
                    </div>  
                    <div class="item_box left">
                        <h4>5</h4>
                        <p>Partner</p>
                    </div>
                    <div class="item_box left">
                        <h4>5</h4>
                        <p>Director</p>
                    </div>
                </div>
                <div class="clear"></div>
            </div>
            <div class="footer_container">
                &nbsp;
                <a class="prev" id="go-left"><</a>
                <span class="nav_title"> | </span>
                <a class="next" id="go-right">></a>
                &nbsp;
            </div>

CSS

body {
    margin: 20px;
    padding: 0;
}
.slider {
    background-color: #fff;
    height: 200px !important;
    margin-bottom: 20px;
    overflow:hidden;
}
.slider > div > div {
background: #ccc;
    margin-right: 20px;
}

.slider > div >div {display:block;height:200px}
.slider > div > div:nth-child(even) {
    border-color: grey;
}

.footer_container{cursor:pointer}

JavaScript

$(document).ready(function($){
            $(".slider").diyslider({
                width: "690px", // width of the slider
                height: "200px", // height of the slider
                display: 3, // number of slides you want it to display at once
                loop: false // disable looping on slides
            }); // this is all you need!

            // use buttons to change slide
            $("#go-left").bind("click", function(){
                // Go to the previous slide
                $(".slider").diyslider("move", "back");
            });
            $("#go-right").bind("click", function(){
                // Go to the previous slide
                $(".slider").diyslider("move", "forth");
            });
        });