「bxSlider」でスマホの時だけ、メニューをスライダーにする

WEB制作
「bxSlider」でスマホの時だけ、メニューをスライダーにする

今回は、bxSliderを使用して、スマホの時だけ、メニューをスライダーにする方法をご紹介します。

目次

サンプルコード

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
<div class="slider">
     <div>I am a slide.</div>
     <div>I am another slide.</div>
 </div>

js

function sliderSetting(){
  var width = $(window).width();
  if(width <= 780){
    $('.slider').not('.slick-initialized').slick({
      adaptiveHeight: true,
      autoplay: true,
      centerMode: true,
      centerPadding: 0,
      dot: false,
    });
   }else{
      $('.slider.slick-initialized').slick('unslick');
   }
}

// 初期表示時の実行
sliderSetting();

// リサイズ時の実行
$(window).resize( function() {
  sliderSetting();
});

if文の中身を入れ替えることで、PCのみスライダーも可能です。