My pattern library

10.1 #Navigation.swipeable-container Swipeable container

A container with a flexbox in it such that

one item at a time is shown,
swiping left/right moves to the previous/next element.

I adapted it from a very good tutorial on CSS Tricks. One difference is that, in that tutorial, overflow-x: hidden; is applied to to the whole <body> element, because each of the children of the swipeable container is meant to fit the whole body. In my solution, I want to be able to make any HTML element swipeable, so I wrap the solution from CSS Tricks in another element (which can be <body> but needn't be), and that is the one targeted by the module.

Note: The plain <div>, which is inside the .swipeable-container and contains the children to be swiped through, is necessary, because it is the flexbox, not the outer .swipeable-container.

Note: This module is accompained by some JavaScript.

Example

Markup

<div class="swipeable-container" style="margin: auto; width: 80%; border: 25px solid black;">
  <div>
    <div style="border-width: 25px; border-style: solid; border-color: red;">
      <div style="margin: auto; width: 8em; height: 5em; background-color: red;"></div>
    </div>
    <div style="border-width: 25px; border-style: solid; border-color: green;">
      <div style="margin: auto; width: 12em; height: 10em; background-color: green;"></div>
    </div>
    <div style="border-width: 25px; border-style: solid; border-color: blue;">
      <div style="margin: auto; width: 16em; height: 15em; background-color: blue;"></div>
    </div>
  </div>
</div>

Source: css/modules/swipeable-container.css, line 1