Reel

コンテンツを横スクロールで表示するリールコンポーネントの作成例を紹介します。

Flex で実装する例

↓

Flex で実装する例 ( スクロールして確認してください )

<Flex className='set-snap' ov='auto' g='30' bdrs='20'>
  <ReelImages ar='16/9' fxsh='0' w='100%' bdrs='20' />
</Flex>

↓

リールの余白に合わせてスナップ位置を調整する例 ( スクロールして確認してください )

リサイズ可能

<Flex className='set-snap' ov='auto' bgc='black' p='30' g='30' 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>

↓

snap-align centerにして要素のサイズをレスポンシブに調整する例 ( スクロールして確認してください )

リサイズ可能

<Flex className='set-snap' ov='auto' g='30' p='20' bgc='black' bdrs='20' style={{ '--snap-align': '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>

Gridで実装する例

↓

Preview ( スクロールして確認してください )

リサイズ可能

<Grid className='set-snap' ov='auto' gaf='column' gac='100%' g='30' bdrs='20' tabIndex='0'>
  <ReelImages ar='16/9' bdrs='20' />
</Grid>

gridでリールの子要素のサイズをレスポンシブに調整する場合、あれば gac(grid-auto-columns) に --colsを指定してください。
(gacは標準状態ではレスポンシブ対応がありません。)

↓

Preview ( スクロールして確認してください )

リサイズ可能

<Grid className='set-snap' ov='auto' gaf='column' gac='var(--cols)' cols={['70%', '40%']} g='20' 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>

ナビゲーションをつける

reel要素にidを付けてアンカーリンク用意すると、ナビゲーションになります。

↓

ボタンナビゲーションをつける

1 2 3 4 5

<Grid className='set-snap' ov='auto' gaf='column' gac='75%' g='20' bdrs='20' style={{ '--snap-align': '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='20' jc='center' lh='1' my-s='20'>
  <Lism tag='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 tag='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 tag='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 tag='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 tag='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>

大きい画面サイズでReelを解除する

小さい画面サイズでのみリールで表示したい場合は、gaf(grid-auto-flow) をrowに戻します。
gaf(grid-auto-flow) をrowに戻したタイミングで、gtc(grid-template-columns)をrepeat(2, 1fr)にして２カラム表示に切り替える例を紹介します。

↓

~@mdでのみリール表示するを解除する例 ( スクロールして確認してください )

リサイズ可能

<Reel g='20' gaf={['column', null, 'row']} gac='75%' gtc={[null, null, 'repeat(2, 1fr)']}>
  ...
</Reel>

縦向きのリール

↓

Preview ( スクロールして確認してください )

リサイズ可能

  <Box max-w='24rem' mx='auto'>
    <Box class='set-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>