Flexスライダが最小 - 最大ダイナミックレンジで動作しないのはなぜですか？

フレックススライダーで、モバイルで3枚、デスクトップで4枚を表示したい。そのために私はフレックススライダーのCarousel with dynamic min/max rangesバージョンを使用しています。そのページのサイズを変更すると、ブラウザウィンドウの幅に応じてthmubanilsの数が変化することがわかります。しかし、私は自分のウェブサイトやjsfiddleやどこでも同じコードを使用すると動作しません。ここでは、ここでjsfiddle proofと同じコードです：Flexスライダが最小 - 最大ダイナミックレンジで動作しないのはなぜですか？

(function() { 
 

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

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

 

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

.container { 
 
    width: 70%; 
 
    max-width: 1100px; 
 
    margin: auto; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.3/jquery.flexslider.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.3/flexslider.min.css" rel="stylesheet" /> 
 

 
<div class="container"> 
 
    <div class="flexslider"> 
 
    <ul class="slides"> 
 
     <li> 
 
     <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" /> 
 
     </li> 
 
     <li> 
 
     <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_lemon.jpg" /> 
 
     </li> 
 
     <li> 
 
     <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_donut.jpg" /> 
 
     </li> 
 
     <li> 
 
     <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_caramel.jpg" /> 
 
     </li> 
 
     <!-- items mirrored twice, total of 12 --> 
 
    </ul> 
 
    </div>

私はgithubの上の問題としてこれを報告することを考えていますが、私は、それは実際のフレックススライダーのウェブサイト上で動作する理由として警戒しています。

出典

2017-03-13 user31782

このスライダーの正式な文書がこの重要な情報を欠いているのは奇妙です。起動時またはロード時に、スライダーのインスタンスをflexsliderグローバル変数に設定する必要があります。

実例。

(function() { 
 

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

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

 
     
 
     $window.ready(function() { 
 
      $('.flexslider').flexslider({ 
 
       animation: "slide", 
 
       animationLoop: false, 
 
       itemWidth: 210, 
 
       itemMargin: 5, 
 
       minItems: getGridSize(), // use function to pull in initial value 
 
       maxItems: getGridSize(), 
 
      \t \t \t start: function(slider){ 
 
       //set slider instance to flexslider variable 
 
      \t \t \t flexslider = slider; 
 
      \t } 
 
      }); 
 
     }); 
 

 
     // check grid size on resize event 
 
     $window.resize(function() { 
 
      var gridSize = getGridSize(); 
 
      flexslider.vars.minItems = gridSize; 
 
      flexslider.vars.maxItems = gridSize; 
 
     }); 
 
     
 
    }());

.container { 
 
    width: 70%; 
 
    max-width: 1100px; 
 
    margin: auto; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 
<div class="container"> 
 
<div id="carousel" class="flexslider"> 
 
    <ul class="slides"> 
 
    <li> 
 
     <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" /> 
 
    </li> 
 
    <li> 
 
     <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_lemon.jpg" /> 
 
    </li> 
 
    <li> 
 
     <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_donut.jpg" /> 
 
    </li> 
 
    <li> 
 
     <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_caramel.jpg" /> 
 
    </li> 
 
    <!-- items mirrored twice, total of 12 --> 
 
    </ul> 
 
</div> 
 
\t </div> 
 
\t 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.3/jquery.flexslider.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.3/flexslider.min.css" rel="stylesheet" /> 
 

 
</body> 
 
</html>

出典

2017-03-13 14:46:23 azs06

どうもありがとう、彼らはドキュメントでこれを言及しなかったその驚くべき。私は実際のソース 'view-source：http：// flexslider.woothemes.com/dynamic-carousel-min-max.html'を完全には読まなかった。私は実際の初期化を見るために底に行っていたはずです。 – user31782

Flexスライダが最小 - 最大ダイナミックレンジで動作しないのはなぜですか？

答えて

関連する問題