[swiper]hashを使わず特定のスライドから始める

Swiperで特定のスライドから始めたい場合はAPIの「Hash Navigation」が便利ですが、以下のような問題があります。

• URLのハッシュが連動して変わっていくことが気になる。
• ハッシュを複数使い分けることはできないため、アンカーリンクなど別の部分でハッシュが使用できなくなる。
• 1ページ内に複数のスライダーが存在する場合、片方しか操作できない。

なので今回は、URLにパラメータをつけることでハッシュを操作せず、複数のスライドにも対応できるようにします。

サンプル（X枚目から始まるスライダー）

2枚目から
3枚目から
4枚目から
5枚目から

手順

Swiperは通常通り設定し、Swiperのスクリプト(new Swiper)以降に下記のJavaScriptを実装します。
後は、URLにパラメータを付与することで好きなスライドから表示可能となります。

JavaScript

const urlParams = new URL(window.location.href).searchParams.get('slide');
if (Number(urlParams)) {
  swiper.slideTo(urlParams, 0);
}

searchParams.get(‘slide‘);
好きなパラメータを設定

swiper.slideTo(urlParams,0);
Swiperの変数名を設定

パラメータ

?slide=1

JavaScriptで設定したパラメータに何枚目のスライドかを指定します。
(スライドは0から数えることに注意。)

複数のスライド

URLに複数のパラメータを渡せば、複数のスライダーで表示するスライドを設定することもできます。

?slideTop=1&slideBottom=3

const urlParamsTop = new URL(window.location.href).searchParams.get('slideTop');
if (Number(urlParamsTop)) {
  swiperTop.slideTo(urlParamsTop, 0);
}

const urlParamsBottom = new URL(window.location.href).searchParams.get('slideBottom');
if (Number(urlParamsBottom)) {
  swiperBottom.slideTo(urlParamsBottom, 0);
}