【解決】Swiperで画面内に現れたらautoplayを開始【スクロール後】

記事内に広告を含みます

パソ君

・Swiperで画面内に現れてからautoplay開始することできる？

こんな疑問にお答えします。

Swiperのオプションにてautoplayを有効にしてると、自動再生してくれますよね。

ただ、スライダー自体がサイトの下の方にある場合、勝手にスライドが切替わってしまいます。。

下記の感じですね↓

See the Pen swiper　autoplayの挙動➀ by jito-coder (@jito-coder) on CodePen.

ユーザーにはまず1枚目を見したい場合もあるかと。

実はあるコードを書けば、画面内に現れてからautoplayを開始させることが可能です。

ジト

知っておくべし！

ということで、この記事では「Swiperで画面内に現れたらautoplayを開始」について解説していきます！

swiper自体の作り方については下記記事を参考に↓

2023年2月20日【簡単】Swiperの使い方｜初心者向けに解説【オプション】

この記事でわかること

Swiperで画面内に現れたらautoplayを開始

【解決】Swiperで画面内に現れたらautoplayを開始【スクロール後】
【解決】Swiperで画面内に現れたらautoplayを開始【スクロール後】：まとめ

【解決】Swiperで画面内に現れたらautoplayを開始【スクロール後】

そんな画面内に現れてからautoplayを開始するサンプルがこちら↓

See the Pen swiper　autoplayの挙動➁ by jito-coder (@jito-coder) on CodePen.

ちゃんと１枚目から表示されていますよね。

<div class="swiper">
    <div class="swiper-wrapper">
        <div class="swiper-slide swiper-slide01">
            <img src="https://jito-site.com/wp-content/uploads/2023/01/1.png" alt="">
        </div>
        <div class="swiper-slide swiper-slide02">
            <img src="https://jito-site.com/wp-content/uploads/2023/01/2.png" alt="">
        </div>
        <!-- 省略 -->
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

window.onload = function () {
    const swiper = new Swiper(".swiper", {
        spaceBetween: 20,
        slidesPerView: 1,
        loop: true,
        speed: 2000,
        autoplay: {
            delay: 1000,
        },
        pagination: {
            el: ".swiper-pagination",
            clickable: true,
        },
        navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
        },
    });
    swiper.autoplay.stop();
    window.addEventListener('scroll', function () {
        var Swiper = document.querySelector('.swiper');
        var position = Swiper.offsetTop - window.innerHeight + 100;
        var scrollTop = window.scrollY;
        if (scrollTop > position) {
            swiper.autoplay.start();
        } else {
            swiper.autoplay.stop();
        }
    });
}

コードの中で重要な点がこちら↓

通常のJavaScriptコードを記述
自動再生をストップさせる
スクロール時に画面内に現れたら自動再生を開始させる

順に解説してきます。

➀：通常のJavaScriptコードを記述

まず下記のように通常のSwiper用コードを記述します。

「autoplay」を記述して、自動再生させるように指定。

window.onload = function () {
    const swiper = new Swiper(".swiper", {
        spaceBetween: 20,
        slidesPerView: 1,
        loop: true,
        speed: 2000,
        autoplay: {
            delay: 1000,
        },
        pagination: {
            el: ".swiper-pagination",
            clickable: true,
        },
        navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
        },
    });
}

他部分は仕様に合わせて調整しましょう。

➁：自動再生をストップさせる

次に自動再生をストップさせる記述をします。

それが下記コードですね↓

swiper.autoplay.stop();

先述したコードの下に追加します。

window.onload = function () {
    const swiper = new Swiper(".swiper", {
        spaceBetween: 20,
        slidesPerView: 1,
        loop: true,
        speed: 2000,
        autoplay: {
            delay: 1000,
        },
        pagination: {
            el: ".swiper-pagination",
            clickable: true,
        },
        navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
        },
    });
    // 自動再生をストップ
    swiper.autoplay.stop();
}

➂：スクロール時に画面内に現れたら自動再生を開始させる

あとは画面内に現れたときに、ストップした自動再生を開始させれば実装完了です。

やり方は「スクロールしたときに～～」という記述をすればOK。

それがこちら↓

window.addEventListener('scroll', function () {
    var Swiper = document.querySelector('.swiper');
    var position = Swiper.offsetTop - window.innerHeight + 100;
    var scrollTop = window.scrollY;
    if (scrollTop > position) {
        swiper.autoplay.start();
    } else {
        swiper.autoplay.stop();
    }
});

スクロール位置が.swiper要素の値の位置を超えたら、自動再生を開始させます。

100の値を変えれば、位置調整可能です。

先述したコードに加えれば実装完成！

window.onload = function () {
    const swiper = new Swiper(".swiper", {
        spaceBetween: 20,
        slidesPerView: 1,
        loop: true,
        speed: 2000,
        autoplay: {
            delay: 1000,
        },
        pagination: {
            el: ".swiper-pagination",
            clickable: true,
        },
        navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
        },
    });
    // 自動再生をストップ
    swiper.autoplay.stop();
    // スクロールした時に.swiper要素が画面内に現れたら自動再生を開始。
    window.addEventListener('scroll', function () {
        var Swiper = document.querySelector('.swiper');
        var position = Swiper.offsetTop - window.innerHeight + 100;
        var scrollTop = window.scrollY;
        if (scrollTop > position) {
            swiper.autoplay.start();
        } else {
            swiper.autoplay.stop();
        }
    });
}