【備忘録】Splideのスライダー内の要素に親要素の大きさを適用する

はじめに

Splideのスライダー内の要素に親要素の大きさを適用する備忘録です。
react-splideをNext.js(App Router)で使用しています。
また、tailwind cssも使用しています。

何が問題だったのか

h-fullは親要素の大きさをそのまま引き継ぐという仕様上、ライブラリがDOMに吐き出す要素に自分でCSSを当てられない場合、その要素の子・孫要素は大元の親要素の大きさを引き継げないという問題が存在しました。

具体的には、Splide自体は以下のようなDOMを吐きますが、この内 splide__trackクラスを持つdiv要素にh-fullを当てられないことで大きさを引き継げませんでした。

<section class="splide" aria-label="基本構造の例">
  <div class="splide__track">
    <ul class="splide__list">
      <li class="splide__slide">Slide 01</li>
      <li class="splide__slide">Slide 02</li>
      <li class="splide__slide">Slide 03</li>
    </ul>
  </div>
</section>

コード例

1.SplideのhasTrackPropsにfalseを渡す。
2.SplideTrackコンポーネントをSplideコンポーネントの子要素に持たせる。

import Image from "next/image";
import { Splide, SplideSlide, SplideTrack } from "react-splide-ts";

export function ImageSliderArea() {
  return (
    <div className="flex-1">
      <Splide className="h-full" hasTrack={false}>
        <SplideTrack className="h-full">
          <SplideSlide>
              <div className="relative h-full">
                <Image
                 src={ImageSrc}
                 alt="EnvHubのスクリーンショット"
                 fill
                 className="object-contain border border-gray-300"
                />
              </div>
          </SplideSlide>
        </SplideTrack>
      </Splide>
    </div>
  );
}

さいごに

hasTrack propsによってスライダーの矢印等を移動させることも出来るようです。
以下ライブラリのリンクです。