Faire un carrousel avec divs

Question

Je veux faire un carrousel. Mais pas un simple carrousel avec des images. J'ai cette structure html, regardez ci-dessous. J'ai trois sections. Chaque fois est un spectacle de section. La balise d'image ci-dessous est l'image d'arrière-plan qui doit être animée. Cette image a une largeur de 3000 pixels. La section div est 1000 pixels div. Quand je clique sur l'autre page. La deuxième section doit être affichée et l'image ci-dessous doit faire défiler jusqu'à -1000 pixels, etc. Mais cela ne fonctionne pas ... Peut-être que vous pouvez m'aider.

<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> 

Et le 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

Vous devez utiliser

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

Depuis l'autre autre définit il devrait être 1000px, où cela va dire, retirer 1000px de gauche en cours position.

Et pour la section que vous pourriez faire

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

et à l'intérieur du clic

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

Mais il y a encore le fait que vous devez vérifier si elle est le premier élément :)