2024.10.01

swiperでのマウスストカーの実装方法

hosoda

2024.10.01

こんにちは。細田です。
今回はswiperでのマウスストカーの実装方法を解説します。

完成したコードはこちら

See the Pen Untitled by 細田拓哉 (@lvgbhqht-the-animator) on CodePen.

マウスストーカーの設定 (mouseStalker 関数)

まず最初にマウスストーカーの関数の設定をやっていきます。

const cursor = document.querySelector(".l-swiper_btn"); // ボタンをカーソルとして使用
const cursorImage = document.createElement("img"); // 画像要素を作成
cursor.appendChild(cursorImage); // ボタン内に画像を追加

cursor:マウスストーカーとして使用するボタン（l-swiper_btn）を選択します。
cursorImage:ボタンの中に画像を追加するために<img>要素を作成します。

document.addEventListener("mousemove", (e) => {
  const mouseAreaRect = document
    .querySelector(".l-restauran_swiper")
    .getBoundingClientRect(); // スワイパーの位置を取得

  cursor.style.top = `${e.clientY - mouseAreaRect.top - cursor.offsetHeight / 2}px`;
  cursor.style.left = `${e.clientX - mouseAreaRect.left - cursor.offsetWidth / 2}px`;

マウスの位置に応じてcursorの位置を更新し、スワイパーエリア内で追尾させる機能です。
マウスのY座標とスワイパーの上端との距離を使って、cursorのtopプロパティを計算して設定します。同様にleftプロパティも設定。

const centerX = mouseAreaRect.left + mouseAreaRect.width / 2;
if (e.clientX < centerX) {
  cursorImage.src = "./img/l-swiper_btn_prev.png"; // 左側の場合
} else {
  cursorImage.src = "./img/l-swiper_btn_next.png"; // 右側の場合
}

スワイパーエリアの中央を基準にして、カーソルが左側にあるか右側にあるかで画像を切り替えます。

左側 (clientX < centerX) なら「prev.png」の画像を表示。
右側なら「next.png」の画像を表示。

スワイパーエリアクリックでスライド切り替え

次にマウスの位置に基づいて、スワイパーを前後に切り替える機能を実装します。

document.querySelector(".l-restauran_swiper").addEventListener("click", (e) => {
  const mouseAreaRect = document
    .querySelector(".l-restauran_swiper")
    .getBoundingClientRect(); // スワイパーの位置を取得

  const centerX = mouseAreaRect.left + mouseAreaRect.width / 2;
  if (e.clientX < centerX) {
    restauranSwiper.slidePrev(); // 左側なら前のスライドへ
  } else {
    restauranSwiper.slideNext(); // 右側なら次のスライドへ
  }
});

スワイパーエリア全体をクリックした際に、中央より左側なら前のスライド（slidePrev）、右側なら次のスライド（slideNext）に切り替える処理をしています。

ボタン自体のクリックイベント

cursor要素自体をクリックした場合もスライドを切り替えるようにしています。

cursor.addEventListener("click", (e) => {
  e.stopPropagation(); // クリックイベントのバブリングを防ぐ
  const mouseAreaRect = document
    .querySelector(".l-restauran_swiper")
    .getBoundingClientRect();

  const centerX = mouseAreaRect.left + mouseAreaRect.width / 2;
  if (e.clientX < centerX) {
    restauranSwiper.slidePrev();
  } else {
    restauranSwiper.slideNext();
  }
});

ボタン（cursor）がクリックされた場合、親要素に対するクリックイベントの伝搬を防ぎ（stopPropagation）、マウスの位置に基づいてスライドを切り替えます。
これによりスライドの上をマウスストーカーして画面の中央より左なら前のスライド、画面の中央より右なら次のスライドに切り替える実装の完成です。