【fullPage.js】スマホ閲覧時だけ無効化する

• Web Create
• 2017.08.09

フルスクリーンでコンテンツを表示する fullPage.js はレスポンシブ対応のプラグインですが、
スマホ閲覧時は無効にしたかったので、その方法について詳しく調べてみました。

デモ

まずは下記デモをご覧ください。
ウィンドウサイズが狭くなると fullPage.js がOFFになります。

See the Pen wqJgvw by leo (@leo-trym) on CodePen.

ソース

HTML

<div id="fullpage">
  <div class="section fp-auto-height-responsive" data-anchor="slide1">DUMMY01</div>
  <div class="section fp-auto-height-responsive" data-anchor="slide2">DUMMY02</div>
  <div class="section fp-auto-height-responsive" data-anchor="slide3">DUMMY03</div>
  <div class="section fp-auto-height-responsive" data-anchor="slide4">DUMMY04</div>
</div>

fp-auto-height-responsive というクラスを付けるとスマホ閲覧時、
height: auto !important; になります。

こちらは jquery.fullpage.min.css に書かれているので、
クラスの付与だけでOKです。

JS

$(function(){
  $('#fullpage').fullpage();

  $(window).on('load resize', function () {
    responsive();
  });
  
  function responsive() {
    var w = $(window).width();
    if ( w <= 768 ) {
      $.fn.fullpage.setResponsive(true);
    } else {
      $.fn.fullpage.setResponsive(false);
    }
  }
  
});

JSで setResponsive を true にすることで、表示の切り替えが行われます。
今回は 768px 以下で true になるようにしました。

resize イベントで分岐しているため、
ウィンドウサイズが変更になってもその都度正しい表示になります。