SimpleCarousel

docs

On CNET, we have a rather common layout that you've no doubt seen elsewhere on the web. We call it a carousel but who knows what others call it. At it's heart, it's some sort of box with content and buttons that cycle through it.

Here are some examples of carousels on our network (these are just images):

So in it's most basic form, a carousel is a bunch of elements (slides) and related interactive elements (buttons). It is animated (i.e. it "plays" through the items) and the user can optionally stop the animation either by clicking a button or mousing over it.

Enter the SimpleCarousel class, which handles all that interactivity for you - again, the html and what it looks like is up to you entirely.

Here's a very, very simple carousel:

The html we'll use:

<style>
#simpleCarousel td div {
  position: absolute;
}
#simpleCarousel td.button {
  padding: 5px;
}
#simpleCarousel td.selected {
  font-weight: bold;
}
#simpleCarousel td.slides {
  height: 20px;
}
</style>
<table id="simpleCarousel">
  <tr><td colspan="4" class="slides">
   <div class="slide">I'm the first content slide</div>
   <div class="slide">I'm the second content slide</div>
   <div class="slide">I'm the third content slide</div>
   <div class="slide">I'm the fourth content slide</div>
  </td></tr>
  <tr>
    <td class="button">one</td>
    <td class="button">two</td>
    <td class="button">three</td>
    <td class="button">four</td>
  </tr>
</table>

...here's that html rendered:

new SimpleCarousel($('simpleCarousel'), $$('#simpleCarousel div.slide'), $$('#simpleCarousel td.button'), {
	slideInterval: 1000,
	rotateAction: 'click'
});
//the default slideInterval is 4 seconds, 
//let's make this example go a little faster

In it's default state, the carousel just makes the slides animate. Note that it doesn't position these elements. You'll need your CSS to do that for you. Each slide should be positioned absolutely (on top of each other).

The buttons don't do anything related to the animation in this example. As each slide cycles, it adds a class name to the button ("selected" when the corresponding slide is visible, "off" when it isn't).

Your buttons will probably be links to the content on some other page, and you'll probably make the slide content also clickable. The SimpleCarousel class has several options, so be sure to check the docs.

Stream All Music

Jesse Sykes & The Sweet Hereafter

With its hippie-baroque script and solo portrait, Sykes' "Like Love Lust" album cover evokes the era of Joni and Judy. Inside is a record that culls the group's wise sense of song but little of its sentimentality, favoring instead fuzzy guitars and a Grant Lee Buffalo brand of wry resignation.

Filed in: Alternative Country-Rock

Jesse Sykes & The Sweet Hereafter

Sample

The Early Years

Hazy psych-rock effects, vocal frailty, punishing drums, and a big ol' flange pedal complete the rock- history roundabout in this London group's "All Ones & Zeros." It's just one of many tours they take on the LP of the same name, but the '80s of Echo & the Bunnymen always sounds like home.

Filed in: Indie Rock

The Early Years

Sample

Fiona Apple

On the LP "Extraordinary Machine," the most controversial--and fantastically talented--alto in all of singer-songwriterdom grudgingly gives us what we wanted: a straight-up terrific record. Like much of her best work, it's rather an enigma, every sultry purr threatening to become a snarl.

Filed in: Adult Alternative Pop/Rock

Fiona Apple

Sample

Full album stream: Stomp The Yard Soundtrack

The beat-tastic film about a step competition proves, not surprisingly, to offer one of the most stellar hip-hop soundtracks in '07. In one sense, it's a document of ambitious urban music circa Chemist's turntable madness and the Roots' organic live beats.

Filed in: Film Soundtracks

Stomp The Yard Soundtrack

Sample

This doesn't look so hot until you execute the carousel code:

new SimpleCarousel($('musicCarousel'), $$('#musicCarousel div.slide'), $$('#musicCarousel a.button'), {
  rotateAction: 'click', /*lets make the user click to jump*/
  slideInterval: 2000,
  onShowSlide: function(){
    /*this layout uses images that change, not classes
      so we have to add a little more logic here*/
    $$('#musicCarousel div.panel-top a.off img').each(function(button, index){
      button.src = button.src.replace('_on', '_off');
    });
    $$('#musicCarousel div.panel-top a.selected img').each(function(button, index){
      button.src = button.src.replace('_off','_on');
    });
  }
});

You can click the numbers at the top to manually see a slide. This also stops the animation.

You can call .hide() on your instance to hide the component from view (sets visibility to hidden; does not alter display property), and .show() to show the component. This is useful if you want to make sure it looks good before it's visible to the user.

.stop will stop the animation (autoplay). .rotate will iterate to the next slide. .autoplay will start the animation.