MoreLesson 271Free preview

Quotes Slideshow

This lesson is part of How To · All levels

Summary

The quotes slideshow displays one quote at a time, then changes periodically or by clicking a button. JavaScript stores a list of active citations and indexes, then updates the text on the page. Provide pause controls and make sure the text changeover doesn't interfere with the screen reader.

Key points

Save the quotation as an array of objects containing text and sources.
Use the modulo operator to get the index back to the beginning after the last quote.
ClearInterval stops automatic rotation when users want to read longer.
"Aria-live="polite" helps the screen reader declare a new quote politely.

Full lesson

Code examples and quizzes

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