FlexSlider
FlexSlider copied to clipboard
woocommerce
Flex slider do not work with min-max dynamic range?
Same issue on stackoverflow I asked: http://stackoverflow.com/q/42763600/3429430
As mention here http://flexslider.woothemes.com/dynamic-carousel-min-max.html the flex slider can take different number of thumbnails as per browser width on resizing. That is on resizing browser window the number of thumnails can be changed. But this feature works only on official site. This can't be used with actual plugin. Here is the code to reproduce the bug:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.3/flexslider.min.css">
<style>
.container {
width: 70%;
max-width: 1100px;
margin: auto;
}
</style>
</head>
<body>
<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>
</div>
<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.3/jquery.flexslider.min.js" defer></script>
<script>
(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;
});
}());
</script>
</body>
</html>
I know this issue is from nearly 2 years ago and hoping that you managed to find the solution yourself. But just writing up the solution for both my future self and anyone else who runs into the issue.
The online code example is missing a vital line that is present in the download demo files. After maxItems add:
...
maxItems: getGridSize(),
start: function(slider){
flexslider = slider;
}
...
