複数ボックスを表示出来るコンテンツスライダー

Result

jQuery

$(document).ready(function() {
    //クリックで左に152px動かす
    $('#next').click(function(event) {
        event.preventDefault();
        $('.table').animate({scrollLeft:'+=152'}, 'slow');        
    });
    //クリックで右に152px動かす
    $('#pre').click(function(event) {
        event.preventDefault();
        $('.table').animate({scrollLeft:'-=152'}, 'slow');        
    });
});

CSS

.table {/*実際に表示される部分*/
    width:456px; 
    height:300px;
    border:solid 1px #ddd;
    background-color:#eee;
    overflow:hidden;
}

.slide {/*スライド全体。数が増えたら数値も増やす*/
    width:1064px; 
    height:300px;
    overflow:hidden;
}

.slide div {/*ボックス1つのレイアウト*/
    float:left;
    width:150px;
    height:300px;
    background-color:#eee;
    border:solid 1px #ddd;
}

HTML

<a id="pre" href="#"><<前へ</a>||<a id="next" href="#">次へ>></a>
<div class="table">
    <div class="slide">
        <div id="col-1"><p>col-1 col-1 col-1 col-1 col-1 col-1 col-1 col-1 col-1 col-1 </p></div>
        <div id="col-2"><p>col-2 col-2 col-2 col-2 col-2 col-2 col-2 col-2 col-2 col-2 </p></div>
        <div id="col-3"><p>col-3 col-3 col-3 col-3 col-3 col-3 col-3 col-3 col-3 col-3 </p></div>
        <div id="col-4"><p>col-4 col-4 col-4 col-4 col-4 col-4 col-4 col-4 col-4 col-4 </p></div>
        <div id="col-5"><p>col-5 col-5 col-5 col-5 col-5 col-5 col-5 col-5 col-5 col-5 </p></div>
        <div id="col-6"><p>col-6 col-6 col-6 col-6 col-6 col-6 col-6 col-6 col-6 col-6 </p></div>
        <div id="col-7"><p>col-7 col-7 col-7 col-7 col-7 col-7 col-7 col-7 col-7 col-7 </p></div>
    </div>
</div>