Creating horizontal scrolling panels
When I say horizontal scrolling panel, hopefully, you know the kind of thing I mean. Horizontal scrolling panels are common on the iOS App and Google Play Store for showing panels of related content (movies, albums, and more). Where there is enough horizontal space, all of the items are viewable. However, when space is limited (think mobile devices), the panel is scrollable from side to side.
I've created a scrolling panel of the top 10 grossing films of 2014. You'll remember this scenario from Chapter 6, and that there is no significance to the year; I just picked one!
It looks like this on an iPhone running iOS 13.3:
Figure 11.4: A horizontal scrolling panel
The markup pattern looks like this; note that I'm just showing the first item in the list for brevity:
<nav class="Scroll_Wrapper">
<figure class="Item">
<img src="f1.jpg" alt="...