一度に3つの画像を表示するjQueryまたはjavascriptスライドの作成方法

Question

jQueryを使用してスライドを見てきました。今では、さまざまなタイプのスライドを行うことについて多くの質問があります。私は、現在の画像選択、次と前の画像である一度に3枚の写真が表示されている20枚の画像のスライドをどのように作成できるのかを知りたい。スライドにも以下のようなボタンが含まれています

Answer 1

jquery flexsliderを使用すると、これを簡単に実行できます。

WorkingFiddle

Htmlの

<div id="page"> 
    <div id="main-slider" class="flexslider"> 
    <ul class="slides"> 
     <li> 
     <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" /> 
     </li> 
     <li> 
     <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_lemon.jpg" /> 
     </li> 
     <li> 
     <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_caramel.jpg" /> 
     </li> 
     <li> 
     <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_donut.jpg" /> 
     </li> 
    </ul> 
    </div> 
    <div id="reviews-slider" class="flexslider"> 
    <ul class="slides"> 
     <li> 
     <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" /> 
     </li> 
     <li> 
     <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_lemon.jpg" /> 
     </li> 
     <li> 
     <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_caramel.jpg" /> 
     </li> 
     <li> 
     <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_donut.jpg" /> 
     </li> 
     <li> 
     <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" /> 
     </li> 
    </ul> 
    </div> 
</div> 

jQueryの

$('#reviews-slider').flexslider({ 
    animation: "slide", 
    itemWidth: 200, 
    itemMargin: 1, 
    minItems: 3, 
    maxItems: 20, 
    move: 0, 
    });