First, I set the basic carousel config on flexslider, this is the carousel in one(1) row. Please take note that you need to load the flexslider plugin on your page, you can download it here - http://www.woothemes.com/flexslider/.
$(window).load(function() {
var itemCnt = 5; // this will be the number of columns per row
var iWidth = parseFloat($('.flexslider').width() / itemCnt);
$('.flexslider').flexslider({
animation: "slide",
slideshowSpeed: 1000,
animationSpeed: 300,
animationLoop: false,
directionNav: false,
slideshow: false,
touch: true,
itemWidth: iWidth,
minItems: itemCnt,
maxItems: itemCnt
});
});Next, is to create a function that will create 2 rows from the basic 1 row slider carousel and this will be called on start function of the slider.
function make2Rows(iWidth) {
var iHeight = parseFloat($('.flexslider .slides > li').height());
$('.alliance-list .slides > li').css('width', iWidth+'px');
$('.alliance-list .slides > li:nth-child(even)').css('margin', iHeight+'px 0px 0px -'+iWidth+'px');
}
$(window).load(function() {
var itemCnt = 5; // this will be the number of columns per row
var iWidth = parseFloat($('.flexslider').width() / itemCnt);
$('.flexslider').flexslider({
animation: "slide",
slideshowSpeed: 1000,
animationSpeed: 300,
animationLoop: false,
directionNav: false,
slideshow: false,
touch: true,
itemWidth: iWidth,
minItems: itemCnt,
maxItems: itemCnt,
start: make2Rows(iWidth)
});
});That's it and hope this would help anyone who are using flexslider as carousel.