こんにちは。福岡のホームページ制作会社、シンス株式会社です。
サイト制作でスライダーの実装時に「Swiper.js」というプラグインを使用されている方は多いのではないでしょうか。
今回はそのSwiperを使用して、スクロールして画面に現れたらスライダーを開始させる方法についてご紹介したいと思います。

スライダーが画面に現れてからスライドを開始することによって、ユーザーに正しい順番でスライドを見せることができます。
是非今回紹介するやり方を参考にしてみて下さい。

スクロールして画面に現れたらスライダーを開始させる方法

実装例

先に今回ご紹介する実装の例をご紹介したいと思います。
下記が実装例となっており、デモ画面内で下へスクロールするとスライダーが現れます。
このスライダーは画面内に現れたら「スライド1」から開始するようにしています。

上からスクロールしてきた時にスライド2以降から始まってしまうと、見せたいコンテンツの順番が変わってしまうから困る…といった悩みを解決するのが、この実装方法です。

上記の方法であれば、ユーザーに見せたい順番でスライドを見せることができます。

jQueryのコード解説

それではコードの解説をおこなっていきます。
Swiperのコードについては公式サイトを参考に作成しておりますので、そちらからご確認ください。

上記のコードで2〜10行目までがSwiperの仕様の記述になっており、11行目以降が今回追記した記述になります。
まず、Swiperは画面に現れるまで停止していないといけませんので、11行目でSwiperを停止させています。
その後、$(window).on('scroll', function (){}によって、画面をスクロールした時に発火させるイベントを作成しました。
スクロールイベント内に格納している変数の意味はそれぞれ次のようになります。

• let position = $('.mySwiper').offset().top - $(window).innerHeight() + 100;
  画面上からSwiperまでの距離 – 画面の高さ + 100
• let scrollTop = $(window).scrollTop();
  画面上から下にスクロールした距離

この後のif文で、変数scrolltopが変数positionより大きい場合に、Swiperを開始させるようにしています。
画像で説明すると下図のようになります。

上画像の赤線ラインまでスライダーが来ると、変数scrolltopの値が変数positionの値より大きくなり、Swiperを開始するといったやり方になります。

変数positionの数値を「+100」にしている理由は、上画像のようにスライダーが画面下から100pxの位置まで見えたらスライドを開始する為です。
この数値を200,300…と変更することによって、画面のどの位置まで見えたらスライドを開始するかを調整できますので、好きに変更してみてください。

また、変数scrolltopの値が変数positionより小さい値の時は、elseとしてSwiperを停止させています。これはもしユーザーが下までスクロールした後、また上にスクロールした際にスライダーを止める処理になります。必要なければ消していただいても構いません。

まとめ

いかがでしたでしょうか。
サイトへ訪れたユーザーに正しい順番で情報を見せたい場合、今回のような実装が必要になってくることもあると思います。
このような実装をしようとしている方にこの記事を読んで頂き、少しでも参考になれば幸いです。

最後に、私たち「シンス株式会社」は福岡でホームページ制作を行なっております。ご興味のある方は下記リンクから是非覗いてみて下さい。

https://since-inc.jp

ここまで読んでくださってありがとうございました！