WordPressの勉強がてら

WordPressの初心者が独学でホームページ作成したときの技術メモ

WordPressの勉強がてら

flexslider2のカルーセルをレスポンシブ対応する

      2015/11/16

カルーセルスライダーをレスポンシブ対応しました。有名なflexsliderで実装。

公式サイトのサンプルコード貼り付けでは動作しなかったのでメモ。

スポンサーリンク

 

公式サイトのサンプルコード

2015/10月現在のflexslider2の公式サイトにあるレスポンシブ対応カルーセルのサンプルコード。リンクはこちら

(function() {

   // store the slider in a local variable
   var $window = $(window),
   flexslider;

   // tiny helper function to add breakpoints
   function getGridSize() {
     return (window.innerWidth < 600) ? 2 :
     (window.innerWidth < 900) ? 3 : 4;
   }

   $(function() {
     SyntaxHighlighter.all();
   });

   $window.load(function() {
     $('.flexslider').flexslider({
       animation: "slide",
       animationLoop: false,
       itemWidth: 210,
       itemMargin: 5,
       minItems: getGridSize(), // use function to pull in initial value
       maxItems: getGridSize() // use function to pull in initial value
      });
   });

    // check grid size on resize event
   $window.resize(function() {
     var gridSize = getGridSize();

      flexslider.vars.minItems = gridSize;
      flexslider.vars.maxItems = gridSize;
   });
}());

明らかに関係ないコードもある。消し忘れ?

 

修正後のコード

下記のように変更

function getGridSize() {
  return (window.innerWidth < 600) ? 2 :
  (window.innerWidth < 900) ? 3 : 4;
}

$(window).resize(function() {
  var gridSize = getGridSize();

  flexslider.vars.minItems = gridSize;
  flexslider.vars.maxItems = gridSize;
});

$(document).ready(function() {
  $('#howtoSlider').flexslider({
    animation: "slide",
    directionNav: false,
    animationLoop: false,
    itemWidth: 265,
    itemMargin: 0,
    pauseOnHover: true,
    minItems: getGridSize(), // use function to pull in initial value
    maxItems: getGridSize(), // use function to pull in initial value
    start: function(slider){
      flexslider = slider;
    }
  });
});
公式サイトのコードだと変数flexsliderが空っぽなので入れてあげる。
おわり。

 - jQuery

  • このエントリーをはてなブックマークに追加

  関連記事

thum_jquery
flexsliderのmanualControlsを使ってサムネイルと連動させる

便利で有名なjqueryのスライダープラグインflexsliderですが、man …

thum_jquery
スクロールしたときに画像を読み込むことでページの表示を高速化させる

スマートフォン向けのサイトなど下に長く画像がたくさんあるページはよくあります。通 …

thum_jquery
jScrollPaneをレスポンシブ対応する

スクロースバーを使うときはいつも「jScrollPane」を使ってます。使い方は …

thum_jquery
ページ内リンクをスムーズスクロール

サイト内を滑らかにスクロールさせます。 ほぼ必ずサイトの右下などに「Topへ戻る …

thum_jquery
スクロールバーをかっこよくデザインする

新着情報などトップページに固定サイズの枠内で表示させるとき、デフォルトの状態だと …