Pluit Carousel - Prototype Carousel

Photos from Flickr by Asaf Einy, Siebe, Laurence, SL Levy, Desirée Delgado, moiht, next_in_line, coquinete, Tnahed

Description

One of the most widely used Javascript widgets is carousel, it is used everywhere from photo slides, product highlights, page navigation, top stories panel, and others. All literally are carousel but with different look and feel.

Pluit Carousel is a simple carousel written to be as bare and simple as possible; so you can use it right away, or easily customize to meet your carousel needs. The idea is to use the same semantically structured HTML and Javascript initialization codes, and applying different skins for customized look and feel. And If you need more advanced behavior, you can easily extend Pluit.Carousel.

If you have created new skins that you would like to share with others, ping me so that I can include the references on this page. Thanks!

Tested on Prototype 1.6.1 and Scriptaculous 1.8.3.

Usage

Include the CSS:

  <link rel="stylesheet" href="css/pluit-carousel.css" type="text/css" media="screen">

Create the HTML tags:

  <div id="carousel-1" class="pluit-carousel">
    <div class="viewport">
      <ul>
        <li>
          <img src="img/flickr/home_photo_megansoh.jpg" alt="Photo by megansoh" width="500" height="333" />
        </li>
        <li>
          <img src="img/flickr/home_photo_ccgd.jpg" alt="Photo by ccgd" width="500" height="333" />
        </li>
        <li>
          <img src="img/flickr/home_photo_lyn.jpg" alt="Photo by lyn" width="500" height="333" />
        </li>
      </ul>
    </div>
  </div>

Include and initialize the JavaScripts:

  <script type="text/javascript" src="js/prototype.js"></script>
  <script type="text/javascript" src="js/effects.js"></script>
  <script type="text/javascript" src="js/pluit-carousel.js"></script>
  <script type="text/javascript">
    // To initialize a single carousel
    new Pluit.Carousel('#carousel-1', {
      circular: true
    });
    
    // To initialize multiple carousels with fade effect 
    new Pluit.Carousel('#carousel-1', '#carousel-2', '#carousel-3', {
      circular: true,
      effect: 'fade'
    });
  </script>

Customize your carousel style, sample customized skins are included in css/pluit-carousel-skins.css, append to pluit-carousel class, e.g. big-nav-skin for larger navigation buttons:

  <div id="carousel-1" class="pluit-carousel big-nav-skin">
  ...
  </div>

Options

Name	Default
circular	false
hideAutoNav	false
effect	move (default) or fade
animDuration	0.5
autoPlay	false
slideDuration	3
viewportClassName	viewport
navClassName	nav
prevClassName	prev
nextClassName	next
pagesClassName	pages
pageClassNamePrefix	page-
activeClassName	active

Source

You can browse the source codes from github: http://github.com/jugend/pluit-carousel. To check out the source codes:

git clone git@github.com:jugend/pluit-carousel.git

Download

Carousel Skins

Fancy Navigation (photo-tag-skin, fancy-nav-skin)

by megan_soh
by ccgd
by +lyn
by xdjio
by tarotastic

Pluit Carousel – Prototype Carousel