CODEWITHSUNDEEP
javascriptjqueryflexslider
HDP
HDP

Reputation: 4221

Flex slider - I want to count Carousel Min & Max Items when resize browser

When Resize browser & then after refresh page. so count Carousel Min & Max Items. but When Not count Carousel Min & Max Items without refresh page.

I want to count Carousel Min & Max Items when resize browser.

See Our Site (I have using Carousel flexslider in Featured Item): http://demo.harnishdesign.net/opencart/polishop/

How to fix it? 

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

}());

Upvotes: 1

Views: 3118

Answers (2)

Đặng Văn Thanh
Đặng Văn Thanh

Reputation: 558

I had the same problem. Try code to fix it.

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

}());

Upvotes: 1

Okky
Okky

Reputation: 10466

Try something like

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

Upvotes: 0

Related Questions