Lism CSS
Search

Reel

This page is currently under construction
Lism UI (@lism-css/ui) is still in preparation.

Examples of creating a reel component that displays content with horizontal scrolling.

Implementation with Flex

↓
Implementation with Flex ( Scroll to preview )
<Flex hasSnap ov="auto" g="20" bdrs="20">
  <ReelImages ar="16/9" fxsh="0" w="100%" bdrs="20" />
</Flex>
↓
Snap position aligned with reel padding ( Scroll to preview )
Resize 
<Flex hasSnap ov="auto" bgc="black" p="20" g="20" bdrs="30" style={{ 'scroll-padding': 'var(--p)' }}>
  <Frame ar="16/9" bdrs="20" fxsh="0" w="90%">
    <img src="https://cdn.lism-css.com/img/u-1.jpg" alt="" />
  </Frame>
  <Frame ar="16/9" bdrs="20" fxsh="0" w="90%">
    <img src="https://cdn.lism-css.com/img/u-2.jpg" alt="" />
  </Frame>
  <Frame ar="16/9" bdrs="20" fxsh="0" w="90%">
    <img src="https://cdn.lism-css.com/img/u-3.jpg" alt="" />
  </Frame>
  <Frame ar="16/9" bdrs="20" fxsh="0" w="90%">
    <img src="https://cdn.lism-css.com/img/u-4.jpg" alt="" />
  </Frame>
  <Frame ar="16/9" bdrs="20" fxsh="0" w="90%">
    <img src="https://cdn.lism-css.com/img/u-5.jpg" alt="" />
  </Frame>
</Flex>
↓
Center snap with responsive element sizing ( Scroll to preview )
Resize 
<Flex hasSnap ov="auto" g="20" p="15" bgc="black" bdrs="20" style={{ '--snapAlign': 'center' }}>
  <Frame ar="16/9" fxsh="0" w={['80%', '60%']} mx-s={['10%', '20%']} bdrs="20">
    <img src="https://cdn.lism-css.com/img/u-1.jpg" alt="" />
  </Frame>
  <Frame ar="16/9" fxsh="0" w={['80%', '60%']} bdrs="20">
    <img src="https://cdn.lism-css.com/img/u-2.jpg" alt="" />
  </Frame>
  <Frame ar="16/9" fxsh="0" w={['80%', '60%']} bdrs="20">
    <img src="https://cdn.lism-css.com/img/u-3.jpg" alt="" />
  </Frame>
  <Frame ar="16/9" fxsh="0" w={['80%', '60%']} bdrs="20">
    <img src="https://cdn.lism-css.com/img/u-4.jpg" alt="" />
  </Frame>
  <Frame ar="16/9" fxsh="0" w={['80%', '60%']} mx-e={['10%', '20%']} bdrs="20">
    <img src="https://cdn.lism-css.com/img/u-5.jpg" alt="" />
  </Frame>
</Flex>

Implementation with Grid

↓
Preview ( Scroll to preview )
Resize 
<Grid hasSnap ov="auto" gaf="column" gac="100%" g="20" bdrs="20" tabIndex="0">
  <ReelImages ar="16/9" bdrs="20" />
</Grid>

When responsively adjusting child element sizes in a Grid-based reel, specify --cols for gac (grid-auto-columns) if available. (gac does not support responsive values by default.)

↓
Preview ( Scroll to preview )
Resize 
<Grid hasSnap ov="auto" gaf="column" gac="var(--cols)" cols={['70%', '40%']} g="15" bdrs="20" tabIndex="0">
  <Frame ar="16/9" bdrs="20">
    <img src="https://cdn.lism-css.com/img/u-1.jpg" alt="" />
  </Frame>
  <Frame ar="16/9" bdrs="20">
    <img src="https://cdn.lism-css.com/img/u-2.jpg" alt="" />
  </Frame>
  <Frame ar="16/9" bdrs="20">
    <img src="https://cdn.lism-css.com/img/u-3.jpg" alt="" />
  </Frame>
  <Frame ar="16/9" bdrs="20">
    <img src="https://cdn.lism-css.com/img/u-4.jpg" alt="" />
  </Frame>
  <Frame ar="16/9" bdrs="20">
    <img src="https://cdn.lism-css.com/img/u-5.jpg" alt="" />
  </Frame>
</Grid>

Adding navigation

By adding an id to each reel item and providing anchor links, you can create navigation controls.

↓
Adding button navigation
12345
<Grid hasSnap ov="auto" gaf="column" gac="75%" g="15" bdrs="20" style={{ '--snapAlign': 'center', 'scroll-behavior': 'smooth' }}>
  <Frame id="image-1" ar="16/9" bdrs="20"><img src="https://cdn.lism-css.com/img/u-1.jpg" alt="" /></Frame>
  <Frame id="image-2" ar="16/9" bdrs="20"><img src="https://cdn.lism-css.com/img/u-2.jpg" alt="" /></Frame>
  <Frame id="image-3" ar="16/9" bdrs="20"><img src="https://cdn.lism-css.com/img/u-3.jpg" alt="" /></Frame>
  <Frame id="image-4" ar="16/9" bdrs="20"><img src="https://cdn.lism-css.com/img/u-4.jpg" alt="" /></Frame>
  <Frame id="image-5" ar="16/9" bdrs="20"><img src="https://cdn.lism-css.com/img/u-5.jpg" alt="" /></Frame>
</Grid>
<Flex g="15" jc="center" lh="1" my-s="15">
  <Lism as="a" href="#image-1" c="inherit" bgc="base-2" w="2em" h="2em" ta="center" ac="center" bdrs="10" td="none" hov="-o">1</Lism>
  <Lism as="a" href="#image-2" c="inherit" bgc="base-2" w="2em" h="2em" ta="center" ac="center" bdrs="10" td="none" hov="-o">2</Lism>
  <Lism as="a" href="#image-3" c="inherit" bgc="base-2" w="2em" h="2em" ta="center" ac="center" bdrs="10" td="none" hov="-o">3</Lism>
  <Lism as="a" href="#image-4" c="inherit" bgc="base-2" w="2em" h="2em" ta="center" ac="center" bdrs="10" td="none" hov="-o">4</Lism>
  <Lism as="a" href="#image-5" c="inherit" bgc="base-2" w="2em" h="2em" ta="center" ac="center" bdrs="10" td="none" hov="-o">5</Lism>
</Flex>

Disabling the reel at larger screen sizes

To show the reel only on small screens, set gaf (grid-auto-flow) back to row. The following example demonstrates switching to a 2-column layout by setting gtc (grid-template-columns) to repeat(2, 1fr) at the same breakpoint.

↓
Example: disable reel only at ~@md ( Scroll to preview )
Resize 
<Grid hasSnap ov="auto" g="15" gaf={['column', null, 'row']} gac="75%" gtc={[null, null, 'repeat(2, 1fr)']}>
  ...
</Grid>

Vertical reel

↓
Preview ( Scroll to preview )
Resize 
<Box max-w="24rem" mx="auto">
  <Box class="has--snap" ov="auto" ar="3/4" bdrs="20" bgc="black">
    <Frame ar="3/4">
      <img src="https://cdn.lism-css.com/img/v/u-1.jpg" alt="" />
    </Frame>
    <Frame ar="3/4">
      <img src="https://cdn.lism-css.com/img/v/u-2.jpg" alt="" />
    </Frame>
    <Frame ar="3/4">
      <img src="https://cdn.lism-css.com/img/v/u-3.jpg" alt="" />
    </Frame>
    <Frame ar="3/4">
      <img src="https://cdn.lism-css.com/img/v/u-4.jpg" alt="" />
    </Frame>
  </Box>
</Box>

© Lism CSS. All rights reserved.

TOC