HTML and CSS Reference
In-Depth Information
// left arrow
$slidePrevNav
.
click
(
function
(
ev
) {
ev
.
preventDefault
();
activeSlideshow
=
false
;
changeSlide
(
currSlide
-
1
);
});
// right arrow
$slideNextNav
.
click
(
function
(
ev
) {
ev
.
preventDefault
();
activeSlideshow
=
false
;
changeSlide
(
currSlide
+
1
);
});
// main navigation
$slideshow
.
find
(
'#slideshow-nav a.nav-item'
).
click
(
function
(
ev
) {
ev
.
preventDefault
();
activeSlideshow
=
false
;
changeSlide
(
$
(
this
).
index
() );
});
// start the animation
slideTimeout
=
setTimeout
(
nextSlide
,
1200
);
});
We've added a couple of things to our script.
First, we've included a second animation in
changeSlide()
, this time to animate the active
indicator in the navigation. This
animate()
is basically the same as the one we built for the
reel, the main difference being that we want to move it only
150px
per slide.
