Green Fox Academy #StayAtHome Coding Camp
Green Fox Academy #StayAtHome Coding Camp
A photo gallery
An image slider that displays images with their titles and descriptions.
Layout created with HTML and CSS:
-> gallery container in the middle of the screen, fixed size
-> gallery’s content: photo-viewer and thumbnails bellow
-> photo-viewer contain arrow buttons on the sides and currently chosen photo in the middle
-> thumbnails under the photo-viewer block
-> current photo has a half transparent description
Navigation and interaction with JAVASCRIPT:
-> at the beginning the first picture is appeared in the photo-viewer
-> the related thumbnail is marked as active
-> by clicking on the arrow buttons on the sides, the content of the viewer block changes to the next or previous item
-> at the same time, the current thumbnail changes based on the currently picked photo
-> if the gallery displays the first image, pressing the previous button shows the last one and opposite
-> by clicking on a thumbnail, the image displays in the viewer area
-> the arrow buttons, the viewer area’s content and the thumbnail’s emphasis work synchronously