フリーランスのためのネットビジネス専門学校 ネットで独立開業を目指す人を応援
フリーランスのためのネットビジネス専門学校 ネットで独立開業を目指す人を応援

jQueryでHeaderを共通化ししたプログラム日記

画像をスライドさせるときにお世話になっている「slick」

レスポンシブで、PCの時はスライダーにせず全表示。スマホになったらスライドにする。というデザインがあったのですが、サイトのデモにあるように単純に$('.your-slider').slick('unslick');にしたりresponsive: []で切り替えるだけではレスポンシブの切り替えがスムーズにいかなかったので備忘。

以下記述

  var mql = window.matchMedia('screen and (max-width: 599px)');
  function checkBreakPoint(mql) {
    if (mql.matches) {
      // スマホ向け(599px以下のとき)
      $('.your-slider').not('.slick-initialized').slick({
        //スライドさせる
        slidesToShow: 2,
        slidesToScroll: 2,
        arrows: true,
        dots: true
      });
    } else {
      // PC向け
      $('.your-slider.slick-initialized').slick('unslick');
    }
  }

  // ブレイクポイントの瞬間に発火
  mql.addListener(checkBreakPoint);

  // 初回チェック
  checkBreakPoint(mql);

slick-initializedは、スライダーが初期化される(スライダーを使用する)時に付与されるclassです。

■参考:通常はスライダーで表示していない部分をスマホの時だけスライダーに変更する方法

[紹介元] jQueryタグが付けられた新着投稿 – Qiita jQueryでHeaderを共通化ししたプログラム日記

コメント

記事に戻る

コメントを残す