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

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

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

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

では実際のソースです。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<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」です。
これを記載しておかないと動きませんので、必ず記載してください。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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: