ブログ

  • 2020年7月8日
  • 2020年7月8日

swiper.jsを使って全画面切替のページを制作する方法

jsのプラグイン「swiper.js」を使用して全画面切替のページを制作する方法のメモ

swiper.jsを使用する準備

本家サイトからダウンロードするかcdnで読み込む

cdnで読み込む場合

https://cdnjs.com/libraries/Swiperにアクセスし、

  • https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.4.5/js/swiper.min.js
  • https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.4.5/css/swiper.min.css

を読み込む

htmlとcss

html

  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide no1">
        <div class="in move">
          <div class="in size">
            <p>Slide <strong>1</strong></p>
          </div>
        </div>
      </div>
      <div class="swiper-slide no2">
        <div class="in move">
          <div class="in size">
            <p>Slide <strong>2</strong></p>
          </div>
        </div>
      </div>
      <div class="swiper-slide no3">
        <div class="in move">
          <div class="in size">
            <p>Slide <strong>3</strong></p>
          </div>
        </div>
      </div>
    </div>
    <!-- ページャー-->
    <div class="swiper-pagination"></div>
  </div>
  

基本構成は

  • .swiper-container
  • .swiper-wrapper
  • .swiper-slide

の3つ
今回は「.swiper-slide」にクラスで番号をつけている
「.swiper-slide」内はお好みで

css

  .swiper-container {
    height: 100vh;
  }
  .swiper-container .swiper-wrapper {
    transition-timing-function: cubic-bezier(0.685, 0.09, 0.1, 0.94);
  }
  .swiper-container .swiper-slide .in {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
  }
  .swiper-container .swiper-slide .in.move {
    transform: translate(30%, -100%);
    transition: 1.1s 0.1s;
    transition-timing-function: cubic-bezier(0.685, 0.09, 0.1, 0.94);
  }
  .swiper-container .swiper-slide .in.size {
    flex-direction: column;
    transform: scale(0.6);
    transition: 1.0s;
  }
  .swiper-container .swiper-slide .in p {
    font-size: 5.0rem;
    opacity: 0;
    transition: 0.8s 1.2s;
  }
  .swiper-container .swiper-slide .in strong {
    font-size: 3.0em;
  }
  .swiper-container .swiper-slide.swiper-slide-next .in.move {
    transform: translate(-30%, 100%);
  }
  .swiper-container .swiper-slide.swiper-slide-active .in.move {
    transform: translate(0);
  }
  .swiper-container .swiper-slide.swiper-slide-active .in.size {
    transform: scale(1);
  }
  .swiper-container .swiper-slide.swiper-slide-active .in p {
    opacity: 1;
    transform: translate(0) !important;
  }
  .swiper-container .swiper-slide.no1 .in.size {
    background-color: #f00;
  }
  .swiper-container .swiper-slide.no1 .in p {
    transform: translate(0, 30%);
  }
  .swiper-container .swiper-slide.no2 .in.size {
    background-color: #0f0;
  }
  .swiper-container .swiper-slide.no2 .in p {
    transform: translate(100%, 0);
  }
  .swiper-container .swiper-slide.no3 .in.size {
    background-color: #00f;
  }
  .swiper-container .swiper-slide.no3 .in p {
    transform: scale(0.2);
  }
  

スライド1枚を1画面にする

js

  var mySwiper = new Swiper ('.swiper-container', {
    // Optional parameters
    direction: 'vertical',
    loop: false,
    speed: 1200,
    effect: "fade",
    virtualTranslate: true,
    preventInteractionOnTransition: true,
    followFinger: false,
    mousewheel: {
      invert: false
    },
    pagination: {
      el: '.swiper-pagination',
    }
  });

  mySwiper.on('slideChangeTransitionEnd', function () {
    console.log("slide" + (Number(this.activeIndex) + 1));
  });
  
virtualTranslate
trueにすると.swiper-wrapperのtransformが削除される(多分effect: “fade”ではあまり関係無い)
preventInteractionOnTransition
trueにすると、移行中にスワイプまたはナビゲーション/ページネーションボタンでスライドを変更出来ない
followFinger
falseのとき、タッチを離したときにスライドが動く。ホールドしている間はアニメーションさせないようにできる
mousewheel
PC時にマウスホイールで動かせるようにする

まとめ

swiper.jsを使用すれば全画面スライドのページが作れる
ブログによって載せられているオプションが違かったりするので、自分の環境でやりたいことが出来ない時は、別のオプションを使用したり色々試した方が良い
デモ

'

お気軽にお問い合わせください

お問い合わせ、お見積りのご依頼は、以下のお問い合わせフォームよりお願いします。