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