非常にシンプルなjQuery Divスライダー

Question

私のページに5つのdivを入れたいのですが、ページの幅ではできません。だから私は彼らの3人だけを見せてくれると思っていて、他の人が見たい人は右矢印をクリックして見ることができます。私はそれが非常に簡単な方法で動作するようにしたい。誰もがそれを行う最善の方法のアイデアを持っていますか？

Answer 1

理論はこの

HTML構造のようになりますので、あなたは、まったくコーディングするためのハードではないでしょう

.outter-container 
    .inner container 
    .slide slide1 
    .slide slide2 
    .slide slide3 
    .slide slide4 
    .slide slideX 

1. 、スライドは幅、ウィンドウ幅を取得
2. ウィンドウ幅/ 3 =スライド幅（これを簡単にするために、常に3つのスライドを一度に）
3. インデックスを適用すると、インデックスが適用されます*スライド幅（これは水平位置に等しい）
4. 相対位置、幅=ウィンドウ幅、オーバーフロー=非表示、および内部コンテナの位置を絶対、左：0、上：0、位置にスライドする：絶対
5. 各スライドをCSS左に設定：インデックスあなたが行く*幅（ポイント3）が
6. 、成功した他のスライド、相互作用
7. next.clickまでの時間を隠す - >内側容器をアニメーションスライド左： - = slide.width（left.clickための反対を）
8. 、内側のコンテナが残っている場合は左/右ボタンを表示/非表示にします。その他...スライドが隠されていないときにクリックしないようにするには

Answer 2

jQuery.DIYslider、、軽量でカスタマイズ可能なjQueryスライダーを使用する方法は次のとおりです。あなたはこのプラグインは、あなたがやりたいものは何でもすることが非常に容易になりますわかりますhttp://jsfiddle.net/bj4yZ/155/

：次のコードの

デモンストレーション。

上記のプラグインのオプション、メソッド、イベントはすべて、上にリンクされたページにあります。

HTML

<button id="go-left">&laquo;</button> <button id="go-right">&raquo;</button> 

<div class="slider"><!-- The slider --> 
    <div><!-- A mandatory div used by the slider --> 
     <!-- Each div below is considered a slide --> 
     <div class="a">Div #1</div> 
     <div class="b">Div #2</div> 
     <div class="c">Div #3</div> 
     <div class="d">Div #4</div> 
     <div class="e">Div #5</div> 
    </div> 
</div> 

はJavaScript

$(".slider").diyslider({ 
    width: "400px", // 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"); 
});