Wie Benutzerdefiniert Animieren <ul> Carousel-Slider mit jQuery?

Ich arbeite zum Aufbau einer kleinen jQuery-basierend Karussell ohne plugin und ich kann einfach nicht scheinen, um die Animationen zu arbeiten. Dies soll nicht auto-drehen, sondern nur drehen, wenn der Benutzer klickt auf "next" oder "prev" - buttons. Die einzige Methode, die ich bekommen kann zu arbeiten automatisch, entfernen des letzten Elements zu ersetzen, das es gerade vor dem ersten element... das passiert im Bruchteil einer Sekunde, und während der es kontinuierlich ist, gibt es keine animation überhaupt.

Hier ist meine HTML-container:

<div class="carousel-nav" clearfix">
  <img src="img/prev.png" id="prv-testimonial">
  <img src="img/next.png" id="nxt-testimonial">
</div>
<div id="carousel-wrap">
  <ul id="testimonial-list" class="clearfix">
    <li>
      <p class="context">Some testimonial goes right here[1]</p>
      <span class="creds">Tiffany LastName</span>
    </li>
    <li>
      <p class="context">"We could not be more pleased. A++ efforts!"</p>
      <span class="creds">Alan Goodwrench</span>
    </li>
    <li>
      <p class="context">"After just one purchase, we know this is the company to stick with."</p>
      <span class="creds">Butters Stotch</span>
    </li>
  </ul>
</div>

Den #carousel-wrap verhält sich wie der viewport fixiert auf 400px(jedes Listenelement ist auch 400px). Die #testimonial-Liste ist dynamisch geändert werden, in der jQuery-basierend auf der Gesamtzahl von items... also 4 Elemente auf 400px ~= 1600px zusammen mit einigen Ränder/padding. Dies hält alle Zeugnisse neben einander, so sollte Sie animieren, in der Ansicht von der rechten/linken Seite.

Hier ist meine sehr einfache jQuery, die ehrlich gesagt nicht so gut, wie ich gehofft hatte:

$('#prv-testimonial').on('click', function(){
  var lastitm = $('#testimonial-list li:last').remove();
  $('#testimonial-list li:first').before(lastitm);
});

Gibt es nur 2 Dinge, die ich brauche, um herauszufinden,:

1. Wenn ein Benutzer klickt auf next/prev buttons wie kann ich die trigger-animation, die von rechts nach Links oder Umgekehrt?
2. Sobald die animation endet, wie Stelle ich sicher, dass das Karussell wird in eine Endlosschleife? Wie bekomme ich die "prev" - Taste, um vom 1. Element den ganzen Weg bis auf das Letzte Element und halten immer noch Kontinuität?

Jede Beratung wäre mehr als dankbar!

InformationsquelleAutor Jake | 2013-12-22