a-little-log

Swiperを使ってスライダーを実装していると、「基本的な設定は共通だけど、一部だけ挙動を変えたい」というケースがよく出てきます。

1ページに同じようなスライダーが存在するけど、微妙にパターンが違っている場合です。

たとえば次のような場面です。

• スライダーAは中央のスライドから表示したい
• スライダーBは先頭から表示したい
• あるスライダーだけ centeredSlides を有効にしたい
• 表示枚数をスライダーごとに変えたい

など、要件はさまざまです。

こうした要件に対して、JavaScript側で条件分岐を増やして対応していくと、if文が増えてコードが読みにくくなったり、なぜその条件が必要なのか分かりづらくなるといった問題が起こりがちです。

そこでおすすめなのが、Swiperのオプションをdata属性でHTML側から制御する設計です。

data属性で制御するという考え方

この方法のポイントは役割分担です。

• HTML：そのスライダー固有の設定を書く
• JavaScript：設定を読み取り、Swiperに渡すだけ

つまり、「どんな挙動をさせたいか」はHTMLに書き、「どうやってSwiperを初期化するか」はJSに任せます。

こうすることで、仕様がHTML上に明示され、JSがシンプルに保たれる構成になります。

基本的な実装例

HTML側

Swiperのルート要素に、必要な設定をdata属性として記述します。

<div
  class="p-common-swiper"
  data-initial-slide="1"
  data-slides-per-view="1.5"
  data-centered="true"
>
  <div class="swiper-wrapper">
    <div class="swiper-slide">...</div>
    <div class="swiper-slide">...</div>
    <div class="swiper-slide">...</div>
  </div>
  <div class="swiper-scrollbar"></div>
</div>

このHTMLを見るだけで、

• 初期表示は2枚目（index 1）
• 表示枚数は1.5
• 中央寄せあり

といった仕様が簡単に把握できます。

JavaScript側

commonElements.forEach(el => {
  const swiper = new Swiper(el, {
    initialSlide: Number(el.dataset.initialSlide ?? 0),
    slidesPerView: Number(el.dataset.slidesPerView ?? 1),
    centeredSlides: el.dataset.centered === 'true',
    spaceBetween: 10,
    mousewheel: {
      forceToAxis: true,
    },
    scrollbar: {
      el: el.querySelector('.swiper-scrollbar'),
    },
  });

  commonSwipers.push(swiper);
});

実装時のポイント

• dataset で取得できる値はすべて文字列
• 数値は Number() で明示的に変換する
• 未指定時のデフォルト値はJS側で持たせる

デフォルト値を設定しておくことで、data属性が未指定の場合でも破綻しない、安全な実装になります。

なぜdata属性が有効なのか

改めて確認していきましょう。

1. HTMLを見るだけで仕様が分かる

JSの中に条件分岐が埋もれていると、「このスライダーはなぜ挙動が違うのか」を追うのが大変です。

data属性を使えば、HTMLを見ただけで理由が分かります。これは、保守や引き継ぎの際に大きなメリットになります。

2. JavaScriptが肥大化しにくい

よくあるパターンとして、

if (type === 'news') {
  ...
} else if (type === 'campaign') {
  ...
}

のような条件分岐を増やしていくと、後から見たときに意図が分かりにくくなります。

data属性方式なら、JSは「基本設定を読むだけ」の役割に集中でき、細かい仕様はHTMLを見ることで把握できます。

3. WordPress案件と相性が良い

WordPressなどでは、テンプレートごとにスライダーを出し分けることも多いかと思います。

その場合でも、PHP側で data-* を出し分けるだけで挙動を調整できるため、JSを触らずに仕様変更が可能です。

data属性で管理するときの注意点

• 設定を増やしすぎない
• 共通設定と個別設定を分けて考える
• すべてをdata属性にしない

あくまで「要素ごとの差分」に限定して使うと、コード全体の見通しが良くなります。

便利だからといって、無理にまとめようとするのは避けましょう。

まとめ

Swiperの設定を柔軟に切り替えたい場合は、

• HTMLにdata属性で意図を書く
• JavaScriptはそれを読み取って初期化する

という設計にすると、可読性と保守性のバランスが取りやすくなります。

initialSlide に限らず、Swiperのオプション全般に応用できる考え方として、実務でも使いやすい方法です。

ぜひ取り入れてみてください。