【簡単】Swiperでパララックススライダーを実装する【サンプルあり】

記事内に広告を含みます

パソ君

・Swiperでパララックスパスライダーってどう実装する？

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

たまにパララックスありのスライダーを実装することがありますよね。

実はSwiperならオプションでパララックス機能を搭載することが可能です。

ジト

すぐにできるよ！

ということで、この記事では「Swiperでパララックススライダーを実装」について解説していきます！

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

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

この記事でわかること

Swiperでパララックススライダーを実装

【簡単】Swiperでパララックススライダーを実装する【サンプルあり】
【簡単】Swiperでパララックススライダーを実装する【サンプルあり】：まとめ

【簡単】Swiperでパララックススライダーを実装する【サンプルあり】

そんなSwiperによるパララックススライダーのサンプルがこちら↓

See the Pen swiper　パララックス by jito-coder (@jito-coder) on CodePen.

<div class="swiper">
    <div class="swiper-wrapper">
        <div class="swiper-slide swiper-slide01">
            <div class="swiper-slide__img" data-swiper-parallax-x="50%" data-swiper-parallax-duration="1500" data-swiper-parallax-scale="1.5">
                <img src="https://jito-site.com/wp-content/uploads/2023/01/1.png" alt="">
            </div>
            <div class="swiper-slide-content"  data-swiper-parallax-y="-50%" data-swiper-parallax-opacity="0">
                <p class="text">ここに文章が入ります。</p>
                <p class="text">ここに文章が入ります。</p>
                <p class="text">ここに文章が入ります。</p>
            </div>
        </div>
        <div class="swiper-slide swiper-slide02">
            <div class="swiper-slide__img" data-swiper-parallax-x="50%" data-swiper-parallax-duration="1500" data-swiper-parallax-scale="1.5">
                <img src="https://jito-site.com/wp-content/uploads/2023/01/2.png" alt="">
            </div>
            <div class="swiper-slide-content"  data-swiper-parallax-y="-50%" data-swiper-parallax-opacity="0">
                <p class="text">ここに文章が入ります。</p>
                <p class="text">ここに文章が入ります。</p>
                <p class="text">ここに文章が入ります。</p>
            </div>
        </div>
        <!-- 省略 -->
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

.swiper-slide {
  overflow: hidden;
}

.swiper-slide-content {
  position: absolute;
  bottom: 30px;
  left: 30px;
}

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

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

通常通りのスライダーを実装
オプションでパララックスを有効に
パララックスの効果をdata属性で指定
「.swiper-slide」に対して「overflow: hidden;」を指定

順に解説してきます。

➀：通常通りのスライダーを実装

まず通常通りのスライダーを実装するHTMLを組み立てます。

<div class="swiper">
    <div class="swiper-wrapper">
        <div class="swiper-slide swiper-slide01">
            <div class="swiper-slide__img">
                <img src="https://jito-site.com/wp-content/uploads/2023/01/1.png" alt="">
            </div>
            <div class="swiper-slide-content">
                <p class="text">ここに文章が入ります。</p>
                <p class="text">ここに文章が入ります。</p>
                <p class="text">ここに文章が入ります。</p>
            </div>
        </div>
        <div class="swiper-slide swiper-slide02">
            <div class="swiper-slide__img">
                <img src="https://jito-site.com/wp-content/uploads/2023/01/2.png" alt="">
            </div>
            <div class="swiper-slide-content">
                <p class="text">ここに文章が入ります。</p>
                <p class="text">ここに文章が入ります。</p>
                <p class="text">ここに文章が入ります。</p>
            </div>
        </div>
        <!-- 省略 -->
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

ここに関してはいつも通りでOKです。デザインに合わせてHTMLを組み立てましょう。

➁：オプションでパララックスを有効に

続いてJavaScriptにて、パララックスを有効にさせます。

下記コードを追加すればOK↓

parallax: true,

実際に追加してみたコードがこちら。

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

これでパララックスが有効になったスライダーが実装できました。

➂：パララックスの効果をdata属性で指定

ただしこのままでは、パララックスの効果は何も反映されません。

反映のために、HTMLにパララックス用のdata属性を指定しましょう。

<div class="swiper">
    <div class="swiper-wrapper">
        <div class="swiper-slide swiper-slide01">
            <div class="swiper-slide__img" 
                data-swiper-parallax-x="50%" 
                data-swiper-parallax-duration="1500" 
                data-swiper-parallax-scale="1.5"
            >
                <img src="https://jito-site.com/wp-content/uploads/2023/01/1.png" alt="">
            </div>
            <div class="swiper-slide-content"  
                data-swiper-parallax-y="-50%" 
                data-swiper-parallax-opacity="0"
            >
                <p class="text">ここに文章が入ります。</p>
                <p class="text">ここに文章が入ります。</p>
                <p class="text">ここに文章が入ります。</p>
            </div>
        </div>
        <!-- 省略 -->
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

「data-swiper-parallax-〇〇」という形で指定します。

指定できる種類がこちら↓

data-swiper-parallax-x	x軸
data-swiper-parallax-y	y軸
data-swiper-parallax-scale	スケール値
data-swiper-parallax-opacity	透過値
data-swiper-parallax-duration	トランジションの時間

これらを仕様に合わせて、パララックスさせたい要素のタグに対して、値を入れて記述しましょう。