swiperを使用してpararax sliderを実装してみた

今回はswiperを使用してパララックススライダーを実装してみましたので
方法を備忘録もかねてご紹介します。

まずはDEMOから。（フォントとかあたってなくてすみません、動きのみ参考にしていただけると嬉しいです）

See the Pen
Untitled by sayuri (@giraffeweb)
on CodePen.0

画像が少し右に動きながら自動でスライドする仕様です。
基本的には通常のswiperを実装する方法でほとんど対応可能ですので、スライダーに
少し変化を付けたい人は実装してみてください。

では実際のソースです。

<section id="sectionGallery">
  <div class="swiper-container">
    <div class="swiper-wrapper">

      <div class="swiper-slide">
        <figure><img data-swiper-parallax-x="20%" src="https://drive.google.com/uc?export=view&id=1zWiG_oZTQaj7YL6dMoL3emnCwEC6T3KK" alt=""></figure>
      </div>
      …
    </div>
    /*矢印ナビゲーション*/
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
    /*矢印ナビゲーション*/
  </div>
</section>

ここに重要になってくるのがimgタグに「data-swiper-parallax-x=”20%”」を記載します。
こうすることでpararaxの動きを実装できます。
縦軸に動かしたい場合は「data-swiper-parallax-y=”20%”」にするといいですよ。
数値に関しはパーセンテージでなくてもOKです。

次にJSです。
基本的にはswiperの設定でOKですが、必ず記載していただきたいのが「parallax: true」です。
これを記載しておかないと動きませんので、必ず記載してください。

var mySwiper = new Swiper ('.swiper-container', {
        effect: 'slide',
        loop: true,
        slidesPerView: 2,
        spaceBetween: 40,
        centeredSlides: true,
        parallax: true,//この記述を忘れずに！
        speed: 2000,
        autoplay: {
            delay: 3000,//自動再生速度
            stopOnLast: false,
            disableOnInteraction: false,
        },
        navigation: { 
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        watchSlidesProgress:true,
        allowTouchMove: false,
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
    });

あっという間にパララックススライダーが実装できましたね。
みなさんもぜひ試してみてください☆

Share: