Hii, continuing with my rather slow progress, today I created component for displaying slideshows that automatically scroll and bounce back when it reaches the end. You can also manually scroll it if you needed to with the arrows.
I’m really proud of how it turned out because the bouncing back and forth is really satisfying to watch.
My biggest struggle was figuring out how to correctly size the cards, especially across differently sized devices. Initially, I had the slideshow as a flex box, as well as the individual cards. The idea for this was to have dynamically sized cards that could have long descriptions. However, neither of these worked. Firstly, the cards would look strange with long descriptions, so I decided to have a set aspect ratio to prevent big empty spaces and/or super long cards that extend the slideshow to an awkward height. Secondly, the slideshow being a flexbox meant that I couldn’t easily cut off the excess to create a scrolling effect, as each card would just become smaller to fit or wrap to the next line.
The solution that ended up working was to have each card as an inline block with a fixed aspect ratio, and cut off super long descriptions (these should be quick summaries anyways) with ellipses. Additionally “whitespace: no-wrap + overflow: scroll” was what I was looking for in terms of keeping cards in a single line.
I learned that there are often many ways there are to approach a problem, and sometimes the solution is in a completely different ballpark, so you just have to keep looking.
