フリーランス|WEB 制作経験丸7年、制作会社様からのご依頼に丁寧・高クオリティでお手伝いいたします。 IRODORI DESIGN

B L O G

【Swiper】最初に表示されるスライド画像を指定する方法

initialSlide
Swiper
オプション
カスタマイズ
最初に表示するスライド画像

Swiperは簡単にスライダーを作成することが出来るプラグインです。
Swiperには最初に表示するスライド画像を指定することが出来るオプションが用意されています。
この記事ではSwiperで最初に表示されるスライド画像を指定する方法をご紹介したいと思います。

Swiperの基本形

まずは通常のSwiperスライダーの作成方法を見てみましょう。
JavaScriptはこちら。class="swiper"要素がSwiperスライダーになります。

new Swiper('.swiper', {
    loop: true,
});

実装サンプルはこちら。

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

initialSlideオプションを指定する

SwiperインスタンスにinitialSlideオプションを指定することで最初に表示されるスライド画像を指定することが出来ます。

new Swiper('.swiper', {
    loop: true,
    initialSlide: 2, // 0から数える
});

1枚目のスライド画像を0として、最初に表示したいスライド画像の番号を指定します。
2枚目の画像を表示したい場合はinitialSlide: 1、3枚目の画像を表示したい場合はinitialSlide: 2と指定します。

実装サンプルはこちら。

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

最初に表示するスライド画像を簡単に指定することが出来ましたね。

まとめ

いかがでしたか?
Swiperには最初に表示するスライドを指定するオプションが用意されています。
これを使うことで簡単に最初に表示するスライドを指定することが出来ますね。
これを応用することで引数やフォームの値を取得して最初に表示するスライドを動的に切り替えるということも出来たりします。
initialSlideオプションを使ってSwiperスライダーをカスタマイズしてみて下さい。