HTML and CSS Reference
In-Depth Information
top
:
0
;
left
:
0
;
}
#slideshow-reel .slide
{
width
:
900px
;
height
:
450px
;
float
:
left
;
background-color
:
gray
;
}
Here, we've defined the dimensions of the slideshow, along with
overflow:hidden
to hide the
other slides in the reel. We've also defined the dimensions of the reel: with six slides at 900
pixels each, it is 5400 pixels wide. (You could also just set this to a really high number, like
10000 pixels.) Then, we absolutely positioned the reel inside the slideshow (which has
position:relative
). Finally, we defined the dimensions for all of the individual slides and
floated them to the left to fill up our reel.
BASIC SLIDESHOW ANIMATION
Now, let's add some jQuery to animate this slideshow:
$
(
function
() {
function
changeSlide
(
newSlide
) {
// change the currSlide value
currSlide
=
newSlide
;
// make sure the currSlide value is not too low or high
if
(
currSlide
>
maxSlide
)
currSlide
=
0
;
else if
(
currSlide
<
0
)
currSlide
=
maxSlide
;
// animate the slide reel
$slideReel
.
animate
({
left
:
currSlide
* -
900
},
400
,
'swing'
,
function
() {
// set new timeout if active
if
(
activeSlideshow
)
slideTimeout
=
setTimeout
(
nextSlide
,
1200
);
