cu.css

Reel

Real creates a carousel-like layout, where items that exceed the available horizontal space become horizontally scrollable.

This is a useful pattern for browsing lots of similar content in a limited amount of vertical space. For example, when creating sausage links or image galleries.

To create a Reel, add the .reel class to a parent element containing any number of child elements.

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Default reel – a carousel-like horizontally scrollable layout
<div class="reel">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
    <div>Item 4</div>
    <div>Item 5</div>
    <div>Item 6</div>
    <div>Item 7</div>
    <div>Item 8</div>
  </div>

Use the data-scroll="snap" attribute to apply CSS scroll snap to your reel items.

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
Reel with scroll snap applied
<div class="reel" data-scroll="snap">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
    <div>Item 4</div>
    <div>Item 5</div>
    <div>Item 6</div>
    <div>Item 7</div>
    <div>Item 8</div>
    <div>Item 9</div>
    <div>Item 10</div>
    <div>Item 11</div>
    <div>Item 12</div>
  </div>

Use the data-variant="img" attribute when creating a reel containing images. This ensures all images maintain their original aspect ratio. By default, the reel height is set to 50vh, however you can control the height of your reel by setting a custom value for --reel-height.

Reel with images. Images by Chuck Givens, Christian Croker, Brian McGowan and Josué AS.
<div class="reel" data-variant="img" style="--reel-height: 60vh;">
  <img src="/img/josue-as-_nprTIIwSk4-unsplash.jpg" alt="" />
  <img src="/img/brian-mcgowan-HiftPDiIVTY-unsplash.jpg" alt="" />
  <img src="/img/christian-crocker-ShY6Jn6n9jQ-unsplash.jpeg" alt="" />
  <img src="/img/brian-mcgowan-3bETLGHcAUU-unsplash.jpg" alt="" />
  <img src="/img/chuck-givens-02AQdLh4gP4-unsplash.jpg" alt="" />
</div>

In the interest of keeping cu.css lightweight, Reel uses the native scrollbar. Should you wish to create a custom scrollbar, refer to Every Layout to learn more about what’s possible.