New jQuery Plugin – The Page Carousel

jQuery Page Carousel Plugin

About a year ago I was asked to create a plugin that allowed visitors to navigate a series of web pages without having to ever actually leave one page. What I came up with I’m calling the Page Carousel plugin. The Page Carousel allows you to take an unordered list and turn each item into its own page.

Features:

  • Turns an unordered list into a web page carousel. Have an entire website run from one page.
  • Each “page” is bookmarkable and can be linked to directly
  • Shortest path algorithm finds the shortest path to the selected page. For example, in a seven page site if you navigate from page 2 to page 7, the carousel slides to the right three pages instead of to the left five pages.
  • Peek effect. Allows users to see part of the previous and next pages.
  • Keyboard navigation. Use the left and right arrows to navigate.
  • Customizable navigation links and arrow images.
  • Resizes with browser.
  • Separate left/right easing effects
  • Callback functions
  • Degradable. No JavaScript? No problem!

Download

Demos

  • Example 1 – Small peek applied
  • Example 2 – Embedded video and alternate navigation options

View each demo’s source code for options and styling.

How to Use

Build an unordered list and wrap it in a div with an ID. Point to jQuery and the plugin (using an easing plugin is optional):

<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript" src="jquery.pagecarousel.js"></script>
<script type="text/javascript">
$(function(){
    $('#container').pageCarousel({
        nextPrevImagePath: 'images/nextprev.png',
        transitionSpeed:500,
        padding:'10px',
        peekAmount: '20px',
        showLinks: true,
        pageWidth: '800px',
        linkPosition: 'top',
        easeLeft: 'easeInOutExpo',
        easeRight: 'easeInOutExpo'
    });
});
</script>
That’s it!

Options

The following options are configurable:

  • viewDuration: the time (in milliseconds) to pause between a completed image and the next image (default: 4000)
  • transitionSpeed:  the time (in milliseconds) to complete a page transition (default: 800)
  • showLinks: Boolean value of whether to display navigation links based on each list item’s title attribute (default: true)
  • showArrows: Boolean value of whether to display navigation arrow images (default: true),
    links: Which side of the page navigation links should be displayed (left, right, both (default) )
  • linkPosition: Where navigation links should be placed on the page (under (default), top, or bott0m)
  • navWidth: Width of the navigation links (default ’60px’)
  • navHeight: Height of the navigation links (default ’20px’)
  • pageWidth: The width of the “page” container (default $(document).width())
  • easeLeft: The easing effect used when moving all pages to the left (default ‘linear’)
  • easeRight: The easing effect used when moving all pages to the right (default ‘linear’)
  • nextPrevImagePath: Path to arrow sprite (default ‘/js/pagecarousel/images/nextprev.png’)
  • nextPrevImageSize: The width and height of the arrow navigation sprite image (default {‘width’:96,’height’:48})
  • padding: The amount of padding to apply to each page (default  ‘0px’)
  • peekAmount: The amount of the previous and next pages to hint at (default  ‘0px’)
  • scrollContainer: Boolean value of whether to wrap the pages in a div to force a scroll bar to appear directly next to the pages instead of on the browser window (default false)
  • onSlideStart: A callback function.
  • onSlideEnd: A callback function.

Easing

While you can use whatever easing effects you like, I’ve found that the best effects are: easeOutCubic, easeInQuart, and easeOutExpo with a one second or less duration. I’m not crazy about easeInElastic, easeInOutElastic, easeInBounce, easeOutBounce, and easeInOutBounce, but feel free to experiment. Note that easeOutElastic, easeInBack, easeOutBack, and easeInOutBack can produce some interesting (if not odd) results.

Enjoy!

21 thoughts on “New jQuery Plugin – The Page Carousel”

  1. Outstanding product! Up and running in a matter of about 1 minute! One question though, wasn’t able to find the “nextprev.png” sprite to see how you envisioned it.

    Best regards!

      1. As an option no, but I can add that to a future version. For now you’d have to use the existing options or hack the code to get that effect,

  2. Lovely code. I’ve got it to work, but I’m trying to link a Spry MenuBar I created already to the carousel so that instead of using the javascript/css buttons it creates, I can use the spry menubar that I’ve created instead. How would I go about doing that?

  3. You mentioned in features that Each “page” is bookmarkable and can be linked to directly, do you have any examples of this feature? Want to create my own navigation but cant link directly to pages.

    Thanks in advance

      1. Yea that works from an outside page, what Im attempting is to link from index.html#1 over to index.html#2 within the same document but it doesnt work.

  4. I like your plugin and have been experimenting with it. Instead of the built-in links and prev/next arrows, how can I use my own elements on the page (such as a custom image or text) to create a link that will slide to the next page?

  5. I have created the page carousel correctly, but now i want to add it inside an already finished website.

    But when i add the HTML on the space i want the slide in it takes the full webpage with a scroll bar. Does anyone know which command to erase or change for this ?

  6. How can you stop the carousel when its circle ends and not repeat from the start?
    Just stop and then go back.. and the same thing when its in the beginning not to go to the final ul with the previous button.

      1. hmm I just thought to use the js in one of my projects and your js is the smoothest I found and perfect for the fb app I want to create.. The carousel effect doesn’t bother me that much as i come to realize.. I want to ask you.. can I incorporate the buttons inside the container with a so i would at least make a limited number of buttons for a registration form? U can see the app I created here: http://bit.ly/QpKhJf

        It is still on development :) Thanks alot for your help man.. your javascript is awesome :)

  7. Hi,
    I’ve been working around a “horizontal scrolling single page” concept for some time.
    There are some restraints and a horizontal page might not be the best option.
    I think a page carousel might be a better option, and I think your “plugin” here might be the solution. I just have 2 questions:
    – is this HTML5 compatible?
    – is there a way to turn off the automatic resize?

    Thanks for any feedback!

    1. I’m not sure what you mean by HTML5 compatible, is there something special you’re looking for? And the carousel doesn’t re-seize anything automatically.

  8. ok, I like your plugin, it as potential! “Resizes with browser” : for the container and text, yes. But for media (img or video) no; because there are cutout, not responsive.
    I see a hash tag for #1,#2,#3… in the url so I thinking the back button worked, but no :-(
    If you think to improve these “problems”… Thanks for your good work :-)

  9. Hi, is there any way to have the navigation and the main content (container) in one div? I implemented the code withing main frame html but the nav is positioned absolute and I cannot fix it :/ Thanks!

Leave a Reply

Your email address will not be published. Required fields are marked *