jQueryなしでスライダーを実装する方法（Vanilla JS）

jQuery を使わずに、純粋な JavaScript（Vanilla JS）だけで実装できる軽量スライダーの作成方法です。
スライダーのライブラリを追加する必要がなく、WordPress の読み込み速度を落とさずに導入できます。

1 実装のポイント

• jQuery不要、純粋な JavaScript（Vanilla JS）で作成
• 左右のボタンでスライド
• 自動再生機能（任意）にも対応可能
• CSSだけで美しい横並びスライダーに
• WordPress 子テーマにコピーするだけで使える

<!-- ▼ Vanilla JS（jQueryなし）で動くスライダーのHTML ▼ -->

<div class="slider-container">
  <div class="slider-track">

    <div class="slide">
      <img src="https://example.com/wp-content/uploads/20××/××/sample1.jpg" alt="画像1">
      <div class="slide-caption">ふわふわのうさぎの写真</div>
    </div>

    <div class="slide">
      <img src="https://example.com/wp-content/uploads/20××/××/sample2.jpg" alt="画像2">
      <div class="slide-caption">甘えん坊犬の写真</div>
    </div>

    <div class="slide">
      <img src="https://example.com/wp-content/uploads/20××/××/sample3.jpg" alt="画像3">
      <div class="slide-caption">元気な犬の写真</div>
    </div>

  </div>

  <button class="prev-btn">‹</button>
  <button class="next-btn">›</button>
</div>
  

2 functions.php にコードを追加

// ---------------------------------------------------------
//  スライダー用のJSを読み込む
// -------------------------------------------------------- 
add_action('wp_enqueue_scripts', function () {
    wp_enqueue_script(
        'vanilla-slider', 
        get_stylesheet_directory_uri() . '/js/vanilla-slider.js', 
        array(), 
        '1.0', 
        true
    );
});
  

3 javascript にコードを追加

ファイル名：vanilla-slider.js
保存先：wp-content/themes/child-theme/js/vanilla-slider.js

//-------------------------------------------
// 完全無限ループスライダー（キャプション対応）
//-------------------------------------------
document.addEventListener("DOMContentLoaded", function () {
  const track = document.querySelector(".slider-track");
  let slides = document.querySelectorAll(".slide");
  const next = document.querySelector(".next-btn");
  const prev = document.querySelector(".prev-btn");

  let index = 1;
  let isMoving = false;

  // ▼ クローン作成（img + caption を含む slide 全体を複製）
  const firstClone = slides[0].cloneNode(true);
  const lastClone = slides[slides.length - 1].cloneNode(true);

  firstClone.id = "first-clone";
  lastClone.id = "last-clone";

  track.appendChild(firstClone);
  track.insertBefore(lastClone, slides[0]);

  slides = document.querySelectorAll(".slide");

  // 最初の本物スライドからスタート
  track.style.transform = `translateX(-${index * 100}%)`;

  function moveToSlide() {
    track.style.transition = "0.4s ease";
    track.style.transform = `translateX(-${index * 100}%)`;
  }

  function transitionEnd() {
    if (slides[index].id === "first-clone") {
      track.style.transition = "none";
      index = 1;
      track.style.transform = `translateX(-${index * 100}%)`;
    }
    if (slides[index].id === "last-clone") {
      track.style.transition = "none";
      index = slides.length - 2;
      track.style.transform = `translateX(-${index * 100}%)`;
    }
    isMoving = false;
  }

  track.addEventListener("transitionend", transitionEnd);

  next.addEventListener("click", () => {
    if (isMoving) return;
    isMoving = true;
    index++;
    moveToSlide();
  });

  prev.addEventListener("click", () => {
    if (isMoving) return;
    isMoving = true;
    index--;
    moveToSlide();
  });
});
  

3.1 ディレクトリ構造

4 汎用CSS

/* ------------------------------------------------
 * jQueryなしスライダー（Vanilla JS）
 * ---------------------------------------------- */

/* スライダー全体 */
.slider-container { /* スライダー外枠コンテナ */
  position: relative; /* ボタン配置の基準にする */
  overflow: hidden; /* 画像やトラックのはみ出し部分を隠す */
  width: 100%; /* 横幅を親要素いっぱいに広げる */
  max-width: 900px; /* 最大幅を900pxに制限する */
  margin: 20px auto; /* 上下20pxの余白＋左右自動で中央配置 */
  border-radius: 12px; /* 角丸を12pxに設定 */
  box-shadow: 0 4px 18px rgba(0,0,0,0.15); /* 外枠に柔らかい影を付ける */
}

/* 横並びトラック */
.slider-track { /* スライドを横に並べて動かす帯 */
  display: flex; /* 子要素（slide）を横並びにする */
  transition: transform 0.4s ease; /* スライド移動のアニメーションを設定 */
}

/* 各スライド */
.slide { /* 1枚のスライドを構成する要素 */
  min-width: 100%; /* スライド幅をコンテナと同じ100%に */
  height: auto; /* 高さは画像に合わせる */
}

/* スライド画像 */
.slide img { /* スライド内の画像 */
  width: 100%; /* 画像を横幅いっぱいに広げる */
  height: auto; /* 比率を維持して高さを調整 */
  display: block; /* 下に余計な隙間が出ないようにブロック化 */
}

/* 左右ボタン（共通） */
.prev-btn, .next-btn { /* 左右ボタンの共通デザイン */
  position: absolute; /* スライダー内で自由配置 */
  top: 40%; /* ボタンの縦位置を中央に */
  transform: translateY(-50%); /* ボタンの中心を合わせる */
  background: rgba(0,0,0,0.4); /* 半透明の黒背景 */
  color: #fff; /* 文字（矢印）を白に */
  border: none; /* 枠線を消す */
  padding: 12px 16px; /* ボタン内の余白 */
  font-size: 28px; /* 矢印の大きさを調整 */
  cursor: pointer; /* ホバー時にクリックカーソルに */
  border-radius: 6px; /* ボタンの角を丸くする */
  z-index: 10; /* ボタンを画像より前面に表示 */
}

/* 左矢印ボタン */
.prev-btn { /* 左側の矢印ボタン */
  left: 10px; /* 左から10pxの位置に配置 */
}

/* 右矢印ボタン */
.next-btn { /* 右側の矢印ボタン */
  right: 10px; /* 右から10pxの位置に配置 */
}

/* ホバー時のボタン */
.prev-btn:hover, .next-btn:hover { /* ホバー時の共通デザイン */
  background: rgba(0,0,0,0.7); /* ボタンを濃くして強調 */
}

/* ▼ キャプション（画像の下に表示する文字） */
.slide-caption { /* キャプション文字エリア */
  text-align: center; /* 文字を中央揃えに */
  margin-bottom:-50px; /*画像の下の空白を短く*/
}
  

5 完成イメージ

ふわふわのうさぎの写真

甘えん坊犬の写真

元気な犬の写真

‹
›

6 代用プラグイン

• Swiper（高機能スライダー）
• Smart Slider 3
• MetaSlider（初心者向け）

7 まとめ

jQuery を使わずにスライダーを実装すると、ページの読み込みが軽くなり、
WordPress サイト全体のパフォーマンスが向上します。

今回紹介したコードを子テーマに追加するだけで、
余計なプラグインを使わずに軽量スライダーを運用できます。

8 関連記事リンク

▶ 画像が横にスライドするカルーセル・スライダーを設置する方法

▶ 画像が切り替わるカルーセル・スライダーを設置する方法