Swiper｜スライドの中の要素に動的にスライド番号を割り当てる方法

2023年2月24日

Swiperを使用した以下のようなコードがあったとします。

<div class="swiper">
    <ul class="swiper-wrapper">
        <li class="swiper-slide js-slide-item">
            <button data-slide-index="1"><img src="https://picsum.photos/300/300" alt="画像"></button>
        </li>
        <li class="swiper-slide js-slide-item">
            <button data-slide-index="2"><img src="https://picsum.photos/300/300" alt="画像"></button>
        </li>
        <li class="swiper-slide js-slide-item">
            <button data-slide-index="3"><img src="https://picsum.photos/300/300" alt="画像"></button>
        </li>
    </ul>
</div>

画像がスライドするスライダーで、各画像をクリックできるようbuttonタグがスライドの中にあります。

そしてbuttonタグにはdata属性でスライド番号が割り当てられています。

buttonタグの中のdata属性

data-slide-index=”1″
data-slide-index=”2″
data-slide-index=”3″

このスライド番号を使って、別のスライダーと連動するような仕様です。

参考：https://tips-web.net/swiper-slide-in-slide/

静的なコーディングでスライド枚数が決まっている場合このままでも問題ないと思います。

一方で動的にループさせてスライド枚数が変動する場合、スライド番号が固定値では他のスライダーとうまく連動しなくなってしまいます。

これを解決するためにスライド番号（上記のdata-slide-index）を動的に出力する方法をご紹介します。

完成形

さっそくですが以下が完成形のコードです。JavaScriptを使ってスライド枚数を動的に出力するコードです。

const slideItems = document.querySelectorAll('.js-slide-item[data-swiper-slide-index]');
slideItems.forEach(function (slideItem) {
    const slideIndex = parseInt(slideItem.dataset.swiperSlideIndex, 10) + 1;
    const button = slideItem.querySelector('button');
    button.setAttribute('data-slide-index', slideIndex);
});

解説

swiper-slideの情報を取得

const slideItems = document.querySelectorAll('.js-slide-item[data-swiper-slide-index]');

swiper-slideには元々data-swiper-slide-indexでスライド番号が振られています。

この番号を含む情報を取得し、slideItemsとして格納しています。そしてslideItemsをforEachで繰り返し処理を行っています。

子要素のdata属性にスライド番号を出力

const slideIndex = parseInt(slideItem.dataset.swiperSlideIndex, 10) + 1;

swiper-slideのスライド番号に1を足した数値をslideIndexに代入しています。

なぜ1を足すかというと、swiper-slideのスライド番号は0から始まりますが、0が不要なためです。

またparseInt()で文字列を整数に変換しています。

 const button = slideItem.querySelector('button');
 button.setAttribute('data-slide-index', slideIndex);

swiper-slideの中にあるbuttonタグを取得して、data-slide-indexに先ほど取得したslideIndexを渡しています。

これでbuttonタグの中にdata-slide-indexとして1から始まる数字が、スライドの数だけ挿入されます。動的にプログラムしたので、スライドの数が何枚になろうと連番でナンバリングされているはずです。

今回私はPHPを使えない、MovableType.netのテンプレートの中でこちらを使用しました。おそらくMovableTypeのタグを使っても実現できたのかもしれませんが、JavaScriptを使ってみました。

どなたかのお役に立てれば幸いです！