コンテンツにスキップ
Lism CSS

Reel

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

Import

Section titled “Import”
ソースコードを手動でコピー&ペーストしてご利用ください。 
 import Reel from '@/components/lism/Reel/index.jsx';

Props

Section titled “Props”
CSS変数説明
--scSnapTypescroll-snap-type
--scBehaviorscroll-behavior
--scPaddingscroll-padding
--scSnapAlign子要素に適用する scroll-snap-align の値
--scSnapStop子要素に適用 する scroll-snap-stop の値

Usage

Section titled “Usage”
↓

gac(grid-auto-columns)で子要素の横幅を指定する

Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi.

リサイズ可能 
<Reel g='20' gac='20rem'>
  <Box bgc='base-2' p='40'><Dummy /></Box>
  <Box bgc='text' c='base' p='40'><Dummy length='xs'/></Box>
  <Box bgc='base-2' p='40'><Dummy /></Box>
  <Box bgc='text' c='base' p='40'><Dummy length='xs'/></Box>
  <Box bgc='base-2' p='40'><Dummy /></Box>
</Reel>
↓

gacをレスポンシブ指定する例

リサイズ可能 
<Reel gac={['75%', '45%']} g='20'>
  <img src='...' alt='' width='960' height='640' />
  <img src='...' alt='' width='960' height='640' />
  ...
</Reel>
↓

--scSnapAlignをcenterにする例

リサイズ可能 
<Reel gac="50%" g='20' style={{ '--scSnapAlign': 'center' }}>
  <img src='...' alt='' width='960' height='640' />
  <img src='...' alt='' width='960' height='640' />
  ...
</Reel>

ナビゲーションをつける

Section titled “ナビゲーションをつける”

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

↓

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

1 2 3 4 5 6 
<Reel gac='75%' g='20'　style={{ '--scSnapAlign': 'center' }}>
  <Frame id='image-1' ar='16/9'>
    <img src='...' alt='' loading='lazy' width='960' height='640' />
  </Frame>
  <Frame id='image-2' ar='16/9'>
    <img src='...' alt='' loading='lazy' width='960' height='640' />
  </Frame>
  <Frame id='image-3' ar='16/9'>
    <img src='...' alt='' loading='lazy' width='960' height='640' />
  </Frame>
  ...
</Reel>
<Flex g='20' jc='c' lh='1' mbs='20'>
  <Lism tag='a' href='#image-1' c='inherit' bgc='base-2' w='2em' h='2em' ta='c' ac='c' bdrs='2' td='none' hov='fade'>1</Lism>
  <Lism tag='a' href='#image-2' c='inherit' bgc='base-2' w='2em' h='2em' ta='c' ac='c' bdrs='2' td='none' hov='fade'>2</Lism>
  <Lism tag='a' href='#image-3' c='inherit' bgc='base-2' w='2em' h='2em' ta='c' ac='c' bdrs='2' td='none' hov='fade'>3</Lism>
  <Lism tag='a' href='#image-4' c='inherit' bgc='base-2' w='2em' h='2em' ta='c' ac='c' bdrs='2' td='none' hov='fade'>4</Lism>
  <Lism tag='a' href='#image-5' c='inherit' bgc='base-2' w='2em' h='2em' ta='c' ac='c' bdrs='2' td='none' hov='fade'>5</Lism>
  <Lism tag='a' href='#image-6' c='inherit' bgc='base-2' w='2em' h='2em' ta='c' ac='c' bdrs='2' td='none' hov='fade'>6</Lism>
</Flex>

縦向きのリール

Section titled “縦向きのリール”
↓
gaf='row'で縦方向にする例
リサイズ可能 
<Reel gaf='row' gar='max-content' ar='3/4.5' bdrs='4' bgc='black' p='30' g='30'>
  <Frame ar='3/4' bdrs='3'>
    <img src='/img.jpg' alt='' loading='lazy' width='960' height='640' />
  </Frame>
  <Frame ar='3/4' bdrs='3'>
    <img src='/img.jpg' alt='' loading='lazy' width='960' height='640' />
  </Frame>
  ...
</Reel>

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

Section titled “大きい画面サイズでReelを解除する”

md以上でreelを解除する例を紹介します。

gaf(grid-auto-flow) をrowに戻し、gtc(grid-template-columns)をrepeat(2, minmax(0, 1fr))にして２カラム表示に切り替えています。

↓
@mdでreelを解除する例
リサイズ可能 
<Reel g='20' gaf={['column', null, 'row']} gac='75%' gtc={[null, null, 'repeat(2, minmax(0, 1fr))']}>
  ...
</Reel>