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

 

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

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;
    }
  });
});

 - jQuery

  関連記事