Slideshow

The idea for a slideshow came about from the user story which asked if the site can use images as its primary source of information rather than using texts. As the site developer, I personally prefer my sites to be image-heavy and minimal texts taking inspiration from social media apps.

Barrier - styling the slideshow container, in particular, the height& width which if styled via style.css images would enlarge and distort the page parameter, this is in part to images original aspect ratio being too large.

Solution - my solution initially was to change the images, using google advanced search filter to find images sizes between 640x480. This did work to a certain extent but not quite as I wanted so I applied inline styling derived from https://www.w3schools.com/ as this worked. After slack feedback #18 I revisited moving the image width into style.css, applied this and the slideshow looked great on desktop but all images were now distorted on mobile and tablet. So I used breakpoints:
```
@media screen and (max-width: 18.75em) {
img  {
width: 90%;
height: 7em;
text-align: center;
}
}
```

/slideshow container mobile/ @media screen and (max-width: 37.5em) { .slideshow-container { width: 100%; height: 10em; text-align: center; } }

@media screen and (max-width: 18.75em) { .slideshow-container { width: 100%; height: 10em; text-align: center; } }


This made the slideshow more responsive to changing screen sizes and resolved the distortion of images.

### Summary
The slideshow works as intended, albeit a slight jolt with some images due to varying heights but is barely noticeable. Future iterations of the site will address this. After receiving feedback from slack #18, I found a solution for the image jolt.

michodgs25 / Somerset-Trails

Project barriers& solutions - Slideshow #12

Slideshow