divでカルーセルを作る

Question

カルーセルを作りたい。しかし、イメージを持つ単純なカルーセルではありません。私はこのhtml構造を持っています、下を見てください。私は3つのセクションを持っています。毎回1つのセクションショーです。下のイメージタグは、アニメートする必要がある背景イメージです。この画像は3000ピクセル幅です。セクションdivは1000ピクセルのdivです。私が他のページをクリックすると。 2番目のセクションはショーでなければならず、下の画像は-1000ピクセルまでスクロールする必要がありますが、動作していません。

<div role="main" class="main selection-carousel"> 
    <section> 
     <h1>Kies je <span class="right">favoriete</span> Smaak</h1> 

     <aside class="aside"> 
      <h2>Dol op chocola?</h2> 
      <p>Proef een thee van <span>chocola, mint</span> en een beetje <span>zoethout</span></p> 
      <a class="button purple" href="#" title="Ik kies voor Chocolat Mint thee">Ik kies voor Chocolat Mint thee</a> 
     </aside> 
    </section> 

    <section> 
     <h1>Kies je favoriete Smaak</h1> 

     <aside class="aside"> 
      <h2>Dol op chocola?</h2> 
      <p>Proef een thee van chocola, mint en een beetje zoethout</p> 
      <a class="button" href="#" title="Ik kies voor Chocolat Mint thee">Ik kies voor Chocolat Mint thee</a> 
     </aside> 
    </section> 

    <section> 
     <h1>Kies je favoriete Smaak</h1> 

     <aside class="aside"> 
      <h2>Dol op chocola?</h2> 
      <p>Proef een thee van chocola, mint en een beetje zoethout</p> 
      <a class="button" href="#" title="Ik kies voor Chocolat Mint thee">Ik kies voor Chocolat Mint thee</a> 
     </aside> 
    </section> 

    <img src="static/img/bg-selection-carousel.png" width="2610" height="600" alt="" class="carousel-image">  
    <a href="#" title="Ga naar de volgende thee smaak" class="carousel-left">Ga naar de volgende thee smaak</a> 
</div> 

とJavaScript：

$(".selection-carousel section:nth-child(3)").hide(); 
     $(".selection-carousel section:nth-child(2)").hide(); 

     var background = $(".carousel-image"); 

     $(".carousel-left").click(function() { 
      background.animate({ left: "-1000px" },1000); 
      console.log(this); 
      $(".selection-carousel section" , this).hide() 
     }); 

Answer 1

あなたは、他のもう一つは、これは現在の左から1000pxを削除し、言うだろう1000px、あるべき定義するので

background.animate({ left: "-=1000px" },1000); 

を使用する必要がありますポジション。

そして、あなたは

$("section").hide(); 
$("section:first").show(); 

とクリックの内側

$("section:visible").hide().next().show(); 

を行うことができますしかし、あなたはそれが最初の項目:)