Reel

このページは現在調整中です

Lism UI (@lism-css/ui) はまだ準備中です。

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

Flex で実装する例

↓

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

<Flex hasSnap ov="auto" g="20" bdrs="20">
  <ReelImages ar="16/9" fxsh="0" w="100%" bdrs="20" />
</Flex>

↓

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

リサイズ

<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>

↓

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

リサイズ

<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>

Gridで実装する例

↓

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

リサイズ

<Grid hasSnap ov="auto" gaf="column" gac="100%" g="20" bdrs="20" tabIndex="0">
  <ReelImages ar="16/9" bdrs="20" />
</Grid>

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

↓

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

リサイズ

<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>

ナビゲーションをつける

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

↓

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

1 2 3 4 5

<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>

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

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

↓

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

リサイズ

<Grid hasSnap ov="auto" g="15" gaf={['column', null, 'row']} gac="75%" gtc={[null, null, 'repeat(2, 1fr)']}>
  ...
</Grid>

縦向きのリール

↓

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

リサイズ

<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>