Flex滑塊 - 我想在調整瀏覽器大小時調整Carousel Min＆Max項目

Question

當調整大小瀏覽器&然後刷新頁面後。所以請計算Carousel Min & Max Items。但不計數時轉盤最小&最大項沒有刷新頁面。

我想計數傳送帶最小值&當調整瀏覽器大小時的最大項目。

參見我們的站點（我一直在使用木馬flexslider中的精選項目）： http://demo.harnishdesign.net/opencart/polishop/

如何解決呢？

(function() { 

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

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

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

}()); 

Answer 1

試着這麼做

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

Answer 2

我有同樣的問題。嘗試解決它的代碼。

(function() { 
 

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

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

 
    $window.load(function() { 
 
    $('#content .featured_carousel').flexslider({ 
 
     animation: "slide", 
 
     animationLoop: false, 
 
     slideshow: false, 
 
     itemWidth: 210, 
 
     minItems: getGridSize(), // use function to pull in initial value 
 
     maxItems: getGridSize(), // use function to pull in initial value 
 
     start: function(slider) { 
 
     flexslider = slider; 
 
     } 
 
    }); 
 
    }); 
 

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

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

 
}());