WEBサイト制作で頻出するスライダー。そのスライダーを簡単に作ることが出来る人気の「Swiper」。
多くのオプションやメソッドが用意されていて、実装出来ないスライダーは恐らくないんじゃないかなと思います。
そんな「Swiper」のメソッドのひとつとして用意されているslideToメソッド。
指定した番号のスライドに移動することが出来るメソッドですが、なぜか移動するスライドが正しかったりズレたりするという現象に遭遇しました。
今回の記事ではslideToがバグってしまい正しく動かない原因と解決方法をご紹介したいと思います。

slideToメソッドとは

「Swiper」に用意されているslideToメソッドを使うと、1つ目を0として、指定した番号のスライドに移動することが出来ます。

slideToメソッドの使い方はこちら。

swiper.slideTo(2);

移動したいスライド番号を引数に指定します。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

ボタンをクリックすると指定したスライドへ移動しますね。

slideToメソッドがズレる原因

「Swiper」のオプションでloop: trueを指定して、スライドをひとつ左にずらした後にボタンをクリックしてslideToメソッドを使うと移動するスライドがズレてしまい正しく動かなくなります。

loop: trueを指定した実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

これはloop: trueを指定したことにより、スライドが移動した後に内部的にタグの順番が変わることが原因のようです。

ブラウザの検証モードでコードを確認するとこのようになっています。
ページを読み込んだ直後の並び順はこちら。

実際にHTMLに記述したタグの順番通りの並び順になっています。

<div class="swiper-slide -a"></div>
<div class="swiper-slide -b"></div>
<div class="swiper-slide -c"></div>

これがスライドが一巡した後、再び検証モードでコードを確認した並び順はこちら。

スライドの並び順が実際のHTMLに記述した並び順と変わっていますね。
実装サンプルの並び順を色で表すと「黄色」「緑色」「赤色」の順番に代わってしまっています。

<div class="swiper-slide -b"></div>
<div class="swiper-slide -c"></div>
<div class="swiper-slide -a"></div>

そのため以下のようなボタンとスライドの組み合わせに変わってしまいました。

「赤色のボタン」→「黄色のスライド」
「黄色のボタン」→「緑色のスライド」
「緑色のボタン」→「赤色のスライド」

再度スライドの移動を繰り返すと元の組み合わせに戻ったりズレたりを繰り返します。
これがloop: trueを指定している時にslideTo()を使った場合のバグの原因です。

slideToメソッドがズレる時の解決方法

解決方法はこちら。
loop: trueを指定している時はslideTo()メソッドを使わず、代わりにslideToLoop()メソッドを使うことです。
slideToLoop()メソッドの使い方はslideTo()メソッドと同じです。

swiper.slideTo(number);

この部分を以下のように変更します。

swiper.slideToLoop(number);

slideTo()メソッドをslideToLoop()メソッドに変更した実装サンプルがこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

スライドがどれだけ移動した後にボタンを押しても正しいスライドに移動しますね。
無事、slideTo()メソッドのバグを解消することが出来ました。

まとめ

いかがでしたか？
loop: trueを指定している時にslideTo()メソッドを使うと移動するスライドがズレてしまい正しく動かない原因と解決方法でした。
「Swiper」は便利で色んなスライダーを作ることが出来るのでこれからも使っていきたいと思っています。