Two dynamic carousel one page flexslider

Question

i need to add two dynamic carousel one page. also minItems and maxItems different . Other one my min max values are 5,4,2 .

how can i add two slider in to the one page with dynamic change value.

my sliders ids are

1). #home-slider-four

2) #home-slider-five

Any One can help me to fixed this. Thank you.

(function() {

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

  // tiny helper function to add breakpoints
  function getGridSize() {
    return (window.innerWidth < 600) ? 1 :
           (window.innerWidth < 1220) ? 3 : 4;
  }
  $(function() {
    SyntaxHighlighter.all();
  });

  $window.load(function() {
    $('#home-slider-four').flexslider({
      animation: "slide",
      animationSpeed: 400,
      animationLoop: false,
      itemWidth: 270,
      itemMargin: 20,
      minItems: getGridSize(), // use function to pull in initial value
      maxItems: getGridSize(), // use function to pull in initial value
      start: function(slider2){
       flexslider2 = slider2;
      }
    });

  });

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

  });
}());

Answer 1

Try This define a function call "function slider" and for that function pass class name or id

function slider(elemname,minIt,maxIt) {



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

  // tiny helper function to add breakpoints
  function getGridSize() {
    return (window.innerWidth < 600) ? 1 :
           (window.innerWidth < 1220) ? minIt : maxIt;
  }



$(function() {
    SyntaxHighlighter.all();
  });


    $(elemname).flexslider({
      animation: "slide",
      animationSpeed: 400,
      animationLoop: false,
      itemWidth: 270,
      itemMargin: 20,
      minItems: getGridSize(), // use function to pull in initial value
      maxItems: getGridSize(), // use function to pull in initial value
      start: function(slider2){
       flexslider2 = slider2;
      }

  });

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

  });
}

and call this function inside document.ready function i.e.

slider("<Your class name or id name>");

in your case it should be

slider("#home-slider-four",3,4); and slider("#home-slider-five",4,5);