High Quality
Open the downloaded document, and select print from the file menu (PDF reader required).
How to Create A JavaScriptCarousel From Scratch InUnder 10 Minutes
by Addy Osmani
Introduction
A Carousel is a component that lets allows you display more content in an area than itcould normally fit (for example: an image gallery) - you can then either use next andback buttons (or tabs) to scroll back and forth through the overflowing content.Carousels are one of the most commonly used JavaScript components on the web thesedays and you can download ready-made plugins that offer carousel behaviour across jQuery, MooTools, YUI..and any other JavaScript framework with little effort. Whilstmany of these components allow you to stick in a list of images or divs to achieve theeffect you're after, wouldn't it be cool to know how these carousels work?. Lets buildone from scratch.
Here's what the final product will look like.
How do I create a Carousel?
The HTML
1. First, lets create a new HTML file and include the latest version of jQuery. For simplicity sakes, lets usea hosted copy from Google Code.
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
2. Next, let's define a HTML structure for our carousel. What's it going to need?
•
We'll need a
container
element to hold both the carousel itself and some navigation links
•
We'll also need to include another div for the
carousel
•
Inside the
carousel
, we'll want to define some elements in a
list
that we can scroll between. Forthis we're going to use a <ul> list with <li> list elements
•
You can include anything you want inside these <li>s but for this article, we're going to useimages so lets also include some <img> elements
<div id="container"> <div id="carousel"> <ul> <li><img src="image1.jpg" /></li> <li><img src="image2.jpg" /></li> <li><img src="image3.jpg" /></li> <li><img src="image4.jpg" /></li> <li><img src="image5.jpg" /></li> <li><img src="image6.jpg" /></li> <li><img src="image7.jpg" /></li> <li><img src="image8.jpg" /></li> </ul> </div> <a id="navPrev" href="#">Next</a> <a id="navNext" href="#">Previous</a> </div>
The JavaScript (using jQuery)
3. Next, lets define two navigation buttons (a previous and next) that will allow you to move to both endsof the carousel.
<script type="text/javascript"> $(document).ready(function(){//Define the animation speed for the Carousel var speed = 600;$('#navPrev').click(function(){//As the rest of our carousel is hidden, lets move it's margin left untilit's in view//We use the jQuery animate() function give this movement a nice smooth feel$('#carousel ul').animate({marginLeft:'-280px'}, speed);});$('#navNext').click(function(){//And now lets move back to the start of the Carousel$('#carousel ul').animate({marginLeft:'1px'}, speed);});}); </script>
Add a Comment
Anon Rayleft a comment
earlybackpack73left a comment