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
- jquery.pagecarousel.js (13k)
Demos
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>
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!
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!
Oops… found it at: http://www.catchmyfame.com//jquery/pagecarousel/images/nextprev.png
===============
BTW – is there a way to make the buttons horizontal underneath the window? I’m thinking of using it to display fixed sized pages and would like to about six navigation buttons across the bottom.
Great Job!
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,
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?
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
Actually you can do it yourself. Just go to the demo, pick any page and copy the url and paste it in a new tab. For example, http://www.catchmyfame.com/jquery/pagecarousel/index.html#3 links directly to the news page.
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.
Try using an absolute link.
Naw, doesnt work either. Thanks anyways.
Its a great plugin nonetheless.
Hmmm, worked when I tested it. Using an absolute path in your link should work the same as a bookmark.
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?