Lism CSS
Docs
Search

Reel

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

Examples of horizontally scrollable reel layouts built with Lism.

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://images.unsplash.com/photo-1615209853186-e4bd66602508?auto=format&fit=max&w=1920&q=80" alt="" />
  </Frame>
  <Frame ar="16/9" bdrs="20" fxsh="0" w="90%">
    <img src="https://images.unsplash.com/photo-1449034446853-66c86144b0ad?auto=format&fit=max&w=1920&q=80" alt="" />
  </Frame>
  <Frame ar="16/9" bdrs="20" fxsh="0" w="90%">
    <img src="https://images.unsplash.com/photo-1534868489953-ef37c20abb25?auto=format&fit=max&w=1920&q=80" alt="" />
  </Frame>
  <Frame ar="16/9" bdrs="20" fxsh="0" w="90%">
    <img src="https://images.unsplash.com/photo-1761597327650-fa885c49bef4?auto=format&fit=max&w=1920&q=80" alt="" />
  </Frame>
  <Frame ar="16/9" bdrs="20" fxsh="0" w="90%">
    <img src="https://images.unsplash.com/photo-1578637387939-43c525550085?auto=format&fit=max&w=1920&q=80" 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%']} ms={['10%', '20%']} bdrs="20">
    <img src="https://images.unsplash.com/photo-1615209853186-e4bd66602508?auto=format&fit=max&w=1920&q=80" alt="" />
  </Frame>
  <Frame ar="16/9" fxsh="0" w={['80%', '60%']} bdrs="20">
    <img src="https://images.unsplash.com/photo-1449034446853-66c86144b0ad?auto=format&fit=max&w=1920&q=80" alt="" />
  </Frame>
  <Frame ar="16/9" fxsh="0" w={['80%', '60%']} bdrs="20">
    <img src="https://images.unsplash.com/photo-1534868489953-ef37c20abb25?auto=format&fit=max&w=1920&q=80" alt="" />
  </Frame>
  <Frame ar="16/9" fxsh="0" w={['80%', '60%']} bdrs="20">
    <img src="https://images.unsplash.com/photo-1761597327650-fa885c49bef4?auto=format&fit=max&w=1920&q=80" alt="" />
  </Frame>
  <Frame ar="16/9" fxsh="0" w={['80%', '60%']} me={['10%', '20%']} bdrs="20">
    <img src="https://images.unsplash.com/photo-1578637387939-43c525550085?auto=format&fit=max&w=1920&q=80" 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>

To responsively adjust child element sizes in a Grid-based reel, specify --cols for gac (grid-auto-columns). (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://images.unsplash.com/photo-1615209853186-e4bd66602508?auto=format&fit=max&w=1920&q=80" alt="" />
  </Frame>
  <Frame ar="16/9" bdrs="20">
    <img src="https://images.unsplash.com/photo-1449034446853-66c86144b0ad?auto=format&fit=max&w=1920&q=80" alt="" />
  </Frame>
  <Frame ar="16/9" bdrs="20">
    <img src="https://images.unsplash.com/photo-1534868489953-ef37c20abb25?auto=format&fit=max&w=1920&q=80" alt="" />
  </Frame>
  <Frame ar="16/9" bdrs="20">
    <img src="https://images.unsplash.com/photo-1761597327650-fa885c49bef4?auto=format&fit=max&w=1920&q=80" alt="" />
  </Frame>
  <Frame ar="16/9" bdrs="20">
    <img src="https://images.unsplash.com/photo-1578637387939-43c525550085?auto=format&fit=max&w=1920&q=80" 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://images.unsplash.com/photo-1615209853186-e4bd66602508?auto=format&fit=max&w=1920&q=80" alt="" /></Frame>
  <Frame id="image-2" ar="16/9" bdrs="20"><img src="https://images.unsplash.com/photo-1449034446853-66c86144b0ad?auto=format&fit=max&w=1920&q=80" alt="" /></Frame>
  <Frame id="image-3" ar="16/9" bdrs="20"><img src="https://images.unsplash.com/photo-1534868489953-ef37c20abb25?auto=format&fit=max&w=1920&q=80" alt="" /></Frame>
  <Frame id="image-4" ar="16/9" bdrs="20"><img src="https://images.unsplash.com/photo-1761597327650-fa885c49bef4?auto=format&fit=max&w=1920&q=80" alt="" /></Frame>
  <Frame id="image-5" ar="16/9" bdrs="20"><img src="https://images.unsplash.com/photo-1578637387939-43c525550085?auto=format&fit=max&w=1920&q=80" alt="" /></Frame>
</Grid>
<Flex g="15" jc="center" hl="0" mbs="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 hasSnap ov="auto" ar="3/4" bdrs="20" bgc="black">
    <Frame ar="3/4">
      <img src="https://images.unsplash.com/photo-1614368558214-f8922bd49987?auto=format&fit=max&w=1400&q=80" alt="" />
    </Frame>
    <Frame ar="3/4">
      <img src="https://images.unsplash.com/photo-1707597757577-1d88e59671c0?auto=format&fit=max&w=1400&q=80" alt="" />
    </Frame>
    <Frame ar="3/4">
      <img src="https://images.unsplash.com/photo-1533918793792-7c67fec577a4?auto=format&fit=max&w=1400&q=80" alt="" />
    </Frame>
    <Frame ar="3/4">
      <img src="https://images.unsplash.com/photo-1761810399655-8be9a861e241?auto=format&fit=max&w=1400&q=80" alt="" />
    </Frame>
  </Box>
</Box>

© 2026 Lism CSS.