FilmRoll: jQuery Carousel

Installation / Configuration

• Download jquery.film_roll.js (19kb) or jquery.film_roll.min.js (12kb)
• Link it in your page:

  <script src="js/jquery.film_roll.js"></script>

• Add markup:

  <div id="film_roll">
    <div>
      <a href="..."><img src="..."> </a>
    </div>
    <div>
      <a href="..."><img src="..."> </a>
    </div>
  </div>

• Fire it up on DOM ready:

  <script>
  $(function() {
    fr = new FilmRoll({
      container: '#film_roll',
      height: 330
    });
  });
  </script>

• For full screen usage, Go here
• For swipe movement include TouchSwipe:

  <script src="js/jquery.touchSwipe.min.js"></script>

• For better performance, use GreenSock

View options »

Why?

Strangely enough, I could not find a jQuery carousel plugin that centered the selected item on the page, especially when all of the items had varying widths. So here you go.

(Yes, I know there are album cover flippers, but that was not what I needed.)

View more »