Grow your CSS skills. Land your dream job.

Javascript Page Slider Roundup

Published by Chris Coyier

"Page Sliders" are a bit like Tabbed Boxes, only the content appears to slide by instead of be instantly replaced. This is a pretty nice effect and like tabbed boxes, it can help you get a lot of content onto a single page without risking visual clutter. There are a number of techniques and frameworks for creating these page sliders. Here is a round up of some ones that I have found and used.

Coda Slider

coda-slider.png
Niall Doherty's Coda Slider was created (and named) in honor of the very nice page slider in use on Panic's Coda software page. There is a downloadable example, including the required jQuery. I love Coda Slider. It has lots of great navigational features besides the obligatory arrows on either side, like tabs with unique classes and interior navigation. The example comes fairly bare-bones, which allows you to really get started quickly designing around it. Perhaps it's best feature is Unique URL's. Using ID-Style navigation (#location), you can link directly to pages within the slider, either from external pages or directly on the page itself.

 

Step Carousel Viewer

dd-carousel.png
Dynamic Drive offers a page slider script they call the Step Carousel Viewer, which uses jQuery as well. The examples they use on the page are images only, but the panels themselves are just DIV's, so you could conceivably put anything you want in there. There are some unique navigational options which makes this one cool such as "forward 2 panels" and "back to 1st panel" as well as an option to display which panel (or range of panels) you are currently viewing.

 

"Follow The Mouse" Slider

woork-example.png
Antonio Lupetti over at Woork has a pretty cool page slider up he says Simulates a Flash Horizontal Navigational Effect, this time using MooTools. The technique is simple to understand. Like all sliders, there is an outer container which hides any overflowing content inside it. Then there is a much wider container inside it, only a portion of which is shown at any given time. Instead of the slider moving ahead or backwards a set amount, this slider moves to the right or left as your mouse approaches the left or right side of the outside container.

 

jCarousel

jcarousel-example.jpg
When I was asking around about these page sliders, jCarousel is the one that I heard about most often so I think it's the "most popular". There are all kinds of unique options for this one: vertical, auto-scroll, dynamic content, auto-repeating, additional animations... Again, all the examples here are image thumbnails, but they are wrapped in list elements so you could replace that with any sort of content. Don't let the small size fool you either, everything is completely CSS controllable.

 

YUI Carousel

yui-carousel.jpg
Of course the ever-popular YUI library wouldn't be left out of all the fun! Bill Scott has developed Carousel Component which features much of the same robust feature set as jCarousel.

 

Examples in Real Usage

I've been kind of into the page slider concept lately (probably a little too much!), but I think it works really great for some things. One of those things in particular is portfolios. There is something really appealing about "flipping through" a portfolio. Sort of reminiscent of when portfolios were big leather things with handles and zippers. Since each project in a portfolio is so different from the next, it's nice to only be looking at one at a time, but not have to wait for a whole page load when you want to see the next. These are largely unfinished, but you can check out a few portfolio-style pages I've done recently: Chatman Design Print Portfolio - Jeff Campana Ceramics. For a more traditional image thumbnail / lightbox example, here is a mockup page for another client of mine: Rick Wilcox Magic Theater.

Comments

  1. Permalink to comment#

    I use coda-slider for my portfolio.

  2. MLB.com and all it’s related sites, ie Phillies.com, braves.com, are using jCarousel.

  3. Permalink to comment#

    a slider is also well executed over at http://www.mclamag.com

  4. Permalink to comment#

    As usual I’m going to point out that the Adobe Spry Framework also has “carousel / sliding panels / sliding doors / page slider / ‘insert other names here’ ”

    Which can be found here: http://labs.adobe.com/technologies/spry/samples/slidingpanels/SlidingPanelsSample.html

    I rather hate the mouse scroller, i think its invented to make people air sick online.

    But nice list ;)

  5. They look nice, easy to use for non-web people which is an added bonus.

  6. I wish you would do a tutorial on installing the coda-slider.

    I’m working on it now and I simply can not get the buttons to work.

    Driving me nuts.

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".