kdcsライブラリー

slick sliderで静止画と動画をスライドさせる方法 copilot

html

<div class="slider">
  <div><img src="img1.jpg" /></div>
  <div><img src="img2.jpg" /></div>
  <div><img src="img3.jpg" /></div>
  <div>
    <video id="video-slide" width="100%" muted>
      <source src="video.mp4" type="video/mp4">
    </video>
  </div>
</div>

javascript（jQuery + Slick）

$(document).ready(function(){
  const $slider = $('.slider');
  const $video = $('#video-slide')[0];

  $slider.slick({
    autoplay: true,
    autoplaySpeed: 3000,
    pauseOnHover: false,
    pauseOnFocus: false,
    arrows: true,
    dots: true
  });

  // スライドが変わる直前に動画を停止＆リセット（動画から離れるとき）
  $slider.on('beforeChange', function(event, slick, currentSlide, nextSlide){
    const isVideoSlide = currentSlide === slick.slideCount - 1;
    const isLeavingVideo = nextSlide !== slick.slideCount - 1;

    if (isVideoSlide && isLeavingVideo) {
      $video.pause();
      $video.currentTime = 0;
    }
  });

  // スライドが変わった後に動画スライドなら再生＆自動スライド停止
  $slider.on('afterChange', function(event, slick, currentSlide){
    const isVideoSlide = currentSlide === slick.slideCount - 1;

    if (isVideoSlide) {
      $slider.slick('slickPause');
      $video.currentTime = 0;
      $video.play();
    } else {
      $video.pause();
      $video.currentTime = 0;
    }
  });

  // 動画が終了したらスライダーを再開し、動画を先頭に戻す
  $video.addEventListener('ended', function(){
    $video.currentTime = 0;
    $slider.slick('slickPlay');
  });
});

・muted 属性は自動再生を許可するために重要です（ブラウザの仕様）。
・slickPause() / slickPlay() で自動スライドの制御。
・currentTime = 0 で動画を先頭に戻す。
・beforeChange と afterChange の両方で動画の状態を管理。

パソコン版とモバイル版で違う動きをさせたい場合、動きを付ける要素のクラスをpcとmobileで切り替える方法。

例はheaderというidに、画面幅が780pxより広いときは「pc」、780px以下のときは「mobile」というクラスを付与して切り替える。

function updateHeaderClass() {
  const header = document.getElementById("header");
  if (!header) return;

  if (window.innerWidth <= 780) {
    header.classList.add("mobile");
    header.classList.remove("pc");
  } else {
    header.classList.add("pc");
    header.classList.remove("mobile");
  }
}

// 初回の実行
updateHeaderClass();

// ウィンドウサイズ変更時にクラス更新
window.addEventListener("resize", updateHeaderClass);

window.innerWidth を使って現在の画面幅を取得。
classList.add() と classList.remove() で不要なクラスを確実に排除。
resize イベントで画面サイズ変更に応答。

wordpressに動画を埋め込んで再生する場合、youtubeであればyoutube画面に再生回数が表示されるが、mpg4などで作成した動画をアップロードして投稿に直接埋め込んだ場合、再生回数を取得するにはjavascriptで動画再生イベントをGA4に送信する必要がある。

document.querySelectorAll("video").forEach(video => {
    video.addEventListener("play", function() {
        gtag("event", "video_play", {
            event_category: "Video",
            event_label: window.location.pathname // 投稿ページのURLを記録
        });
    });
});

1. GA4のカスタムイベントを作成
GA4の管理画面でカスタムイベントを作成。

例：イベント名「video_play」ブログのシングルページ内の動画なのでpage_locationの値を「/blog/」にする。

1. GA4管理画面 → 「イベント」 → 「カスタムイベントを作成」
2. 「イベント名」を video_play に設定
3. 「条件」に event_name = video_play を指定
パラメーター：event_name　演算子：次と等しい　値：video_play
4. 「パラメータ」に page_location（投稿ページのURL）を追加
パラメーター：page_location　演算子：次を含む　値：/blog/

wordpressの投稿で改行するとpタグに が入って空白の改行が出来てしまう。
この空白の改行がスマホ画面で邪魔になる場合に非表示にする方法。

例は画面幅640px以下の場合に 入りのpタグを非表示にする方法

javascript

//画面幅640px以下で空白のpタグを非表示にする----------------
const mediaQuery = window.matchMedia("(max-width: 640px)");

function hideEmptyPTags(event) {
  if (event.matches) {
    document.querySelectorAll("p").forEach(p => {
      if (p.innerHTML.trim() === " ") {
        p.style.display = "none";
      }
    });
  } else {
    // 画面幅が640pxを超えた場合、元に戻す（必要に応じて）
    document.querySelectorAll("p").forEach(p => {
      if (p.innerHTML.trim() === " ") {
        p.style.display = "block";
      }
    });
  }
}

// イベントリスナーを追加
mediaQuery.addEventListener("change", hideEmptyPTags);

// 初回チェック
hideEmptyPTags(mediaQuery);

cssとjavascript「infiniteslide」で無限ループスライダーを作成したがpcとspどちらとも左右動作できるパターン無しという結果。