FilmRoll: jQuery Carousel

FilmRoll is a lightweight carousel that focuses on one item, centering it in the view:

It supports large and small items, external buttons, swipe movement, full screen, and more:

‹ LEFT RIGHT ›

If the content is smaller than the container, it does not rotate:

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 »


Fork me on GitHub