Five Useful Interactive CSS/jQuery Techniques Deconstructed - Practical JavaScript Techniques - page 32

< div class =" slide ">
< h1 > Slide 2 </ h1 >
</ div >
< div class =" slide ">
< h1 > Slide 3 </ h1 >
</ div >
< div class =" slide ">
< h1 > Slide 4 </ h1 >
</ div >
< div class =" slide ">
< h1 > Slide 5 </ h1 >
</ div >
< div class =" slide ">
< h1 > Slide 6 </ h1 >
</ div >
</ div >
</ div >
Here we've set up six slides, which can be filled with any content we need. Let's set up some
CSS to display the slides as a horizontal reel:
#slideshow {
width : 900px ;
height : 500px ;
overflow : hidden ;
position : relative ;
}
#slideshow-reel {
width : 5400px ;
height : 450px ;
position : absolute ;