W3.CSSLesson 48Free preview
W3.CSS Slideshow
This lesson is part of W3.CSS · All levels
Summary
Slideshow displays a set of images or text alternately in a single frame. The key is .w3-display-container as an absolute position container, and then each slide is stored as an image that appears or is hidden via JavaScript. The arrow buttons are placed with .w3-display-left and .w3-display-right.
Key points
- Wrap the slide in so that the child can be positioned freely (.w3-display-container)
- Active slides are displayed, other slides are hidden with display: none
- Arrow button using .w3-display-left and .w3-display-right
- Caption divided by .w3-display-middle
- The slide automatically runs using the Interval set in JavaScript
Full lesson
Code examples and quizzes
Full lessons, code examples, and quizzes are available to subscribers. 5 questions.