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;
});
}());
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;
});
}());
3 Answers
Reset to default 4Try 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);
I have forked a fiddle with multiple Demo
Working Demo
jQuery
// The slider being synced must be initialized first
$('#reviews-slider').flexslider({
animation: "slide",
//other options
asNavFor: '#main-slider'
controlsContainer: '.flex-container'
});
$('#main-slider').flexslider({
//other options
sync: "#reviews-slider"
});
Note the asNavFor, controlsContainer and sync in options
More Info on Multiple Slider: http://www.woothemes./flexslider/
I've never used the flex slider plugin, but I have used other jQuery powered gallery/carousels.
I think all you really need to do is create another jQuery object with flexslider API options, similar to what you've done with #home-slider-four
Example:
$('#home-slider-four').flexslider({ // options here // });
$('#home-slider-five').flexslider({ // different options here // });
That should do it.
Again, I've never used flex slider, so I'm unsure if this will work. This technique does work with RoyalSlider.
Best of luck!