Making a simple jQuery carousel

问题:

I'd like to make a very simple jQuery carousel, that advanced via a set of controls "back" | "forward", and loops infinitely. Seems like all the ready made ones have way more features than I'd like.

The structure I have now looks like this. HTML:

<section id="content">
  <a class="back">Back</a>
  <a class="forward"/>Forward</a>

  <article>
   <p>Lorem ipsum</p>
  </article>

  <article>
   <p>Lorem ipsum</p>
  </article>

  <article>
   <p>Lorem ipsum</p>
  </article>

</section>

The first one in the stack is the default on page load, and I'd like to animate to the left when it goes forward, and to the right when it goes backwards.

Any pointers on what this might look like in jQuery?

回答1:

One (in fact two) of the lessons on 30 days to learn jQuery tutorial is a simple slider implementation that might help you to build your own carousel:

http://tutsplus.com/lesson/the-obligatory-slider/
http://tutsplus.com/lesson/prototypal-inheritance-and-refactoring-the-slider/