ImagesLesson 57Free preview

Slideshow

This lesson is part of How To · All levels

Summary

The slideshow displays a single slide of several options and allows the user to move with the previous or next button. JavaScript keeps the slide index active, and then swaps the visible classes. The modulo pattern makes navigation back to the beginning after the last slide.

Key points

Each slide is positioned absolutely to occupy the same area.
Only slides with the class .active are shown.
The index is calculated by modulo to keep it spinning.
SetInterval can be used for automatic slideshow, and clearInterval to stop it.
The navigation button needs an aria label to make it function clearly.

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.