Splideで作るアーチ状のカルーセル、ライブラリと競合しないtransformのかけ方

1
<div class="arch-splide splide" id="arch-carousel">
2
  <div class="splide__track">
3
    <ul class="splide__list">
4
      <li class="splide__slide">
5
        <div class="arch-slide-inner">
6
          <div class="arch-card">01</div>
7
        </div>
8
      </li>
9
      <!-- 以下繰り返し -->
10
    </ul>
11
  </div>
12
</div>

1
const track = root.querySelector(".splide__track");
2
let rafId = null;
3

4
const applyArch = () => {
5
  const trackRect = track.getBoundingClientRect();
6
  const centerX = trackRect.width / 2 + trackRect.left;
7
  const half = trackRect.width / 2;
8

9
  const slides = root.querySelectorAll(".splide__slide");
10
  for (const el of slides) {
11
    const rect = el.getBoundingClientRect();
12
    // スライド自身の中心のX座標
13
    const slideCenterX = rect.width / 2 + rect.left;
14
    // スライド中心とトラック中心とのX方向の差分
15
    const delta = slideCenterX - centerX;
16

17
    // トラック半幅で正規化したx方向のオフセット: -1（左端）… 0（中央）… 1（右端）
18
    let centerOffset = delta / half;
19
    if (centerOffset > 1) centerOffset = 1;
20
    if (centerOffset < -1) centerOffset = -1;
21

22
    // 中心からの距離に応じた0～1の補正値（カーブを滑らかにする）
23
    const archRate = Math.pow(Math.abs(centerOffset), EASE_POWER);
24
    // 最終的なY方向のずらし量（px）。中心で0、端でMAX_Yに近づく
25
    const y = MAX_Y * archRate;
26
    // 最終的な回転角（deg）。中心からの向きに応じて端に向かって外側へ傾く
27
    const rotate = MAX_ROTATE * centerOffset;
28

29
    const inner = el.querySelector(".arch-slide-inner");
30
    if (!inner) continue;
31

32
    // delta をスライド幅で正規化し、中央(50%)を基準に transform-origin の x座標をずらす
33
    const originX = Math.max(
34
      0,
35
      Math.min(100, 50 - (delta / rect.width) * ORIGIN_SHIFT),
36
    );
37
    inner.style.transformOrigin = `${originX.toFixed(2)}% 100%`;
38
    inner.style.transform =
39
      "translateY(" +
40
      y.toFixed(2) +
41
      "px) rotate(" +
42
      rotate.toFixed(2) +
43
      "deg)";
44
  }
45

46
  rafId = requestAnimationFrame(applyArch);
47
};

1
splide.on("mounted", () => {
2
  rafId = requestAnimationFrame(applyArch);
3
});
4

5
splide.on("destroy", () => {
6
  if (rafId) cancelAnimationFrame(rafId);
7
});
8

9
splide.mount();

1
const MAX_Y = 26; // px: 両端のスライドに適用する下方向オフセットの最大値
2
const MAX_ROTATE = 6.5; // deg: 両端のスライドに適用する回転角の最大値
3
const EASE_POWER = 2; // Y方向の減衰カーブの指数（2 = 滑らかな放物線状に変化）
4
const ORIGIN_SHIFT = 24; // スライド1枚分の水平オフセットあたり、transform-origin のx座標をずらす量（%pt）

1
.splide__slide {
2
  width: 25vw; /* スライドの幅 */
3
}

1
const splide = new Splide(root, {
2
  gap: "16px", // スライド間の余白
3
  // その他のオプション
4
});