ImagesLesson 58Free preview
Slideshow Gallery
This lesson is part of How To · All levels
Summary
The slideshow gallery combines a large main image with a row of thumbnails below. When the thumbnail is clicked, the main image changes and the thumbnail is marked active. This pattern gives users a quick snapshot and control over selecting a particular photo.
Key points
- The thumbnail acts as the main image selector button.
- The class .active on the thumbnail shows the option that is being displayed.
- The main image src attribute is updated via JavaScript.
- Object-fit: the cover keeps the main image ratio without distortion.
- The opacity and outline help to distinguish the active thumbnail from the others.
Full lesson
Code examples and quizzes
Full lessons, code examples, and quizzes are available to subscribers. 5 questions.