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

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

フルスクリーンでコンテンツを表示する 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 イベントで分岐しているため、
ウィンドウサイズが変更になってもその都度正しい表示になります。

Writer

ko

KO

誕生日に会社のみんなから『世界文学全集』をプレゼントしてもらった読書好きフロントエンド・エンジニアです。WordPressとMovableTypeが得意ですが、本当の特技は薪割りです。

Page Topへ