時給単価UP【3大特典付き】
コーディングテクニック集100選⋙

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

記事内に広告を含みます

パソ君
パソ君

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

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

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

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

ジト
ジト

すぐにできるよ！

ということで、この記事では「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-xx軸
data-swiper-parallax-yy軸
data-swiper-parallax-scaleスケール値
data-swiper-parallax-opacity透過値
data-swiper-parallax-durationトランジションの時間

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

➃：「.swiper-slide」に対して「overflow: hidden;」を指定

先述した➂でパララックス効果を反映することはできました。

ですが現状だと下記のように反映されてしまいます↓

切替開始時が、変な見え方になっていますよね。

これを改善するために「.swiper-slide」に対して「overflow: hidden;」を指定しましょう。

.swiper-slide {
    overflow: hidden;
}

するとよい感じに切り替わります↓

これでSwiperでのパララックススライダー実装が完成しました！

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

  • オプションでパララックスを有効に
  • パララックスの効果をdata属性で指定
  • 「.swiper-slide」に対して「overflow: hidden;」を指定
ジト
ジト

Swiperでパララックススライダーを実装する時はためしてみてね！

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

CAPTCHA


前の記事

【解説】Swiperのブレイクポイント設定方法【レスポンシブ対…

次の記事

【解決】Swiperで高さバラバラのスライドを調整【揃える／中…