如何將多行支持添加到FlexSlider？

Question

我在我的Wordpress網站上使用FlexSlider。一切正常。但我想讓我的畫廊顯示2行。我搜索了它，但沒有找到解決方案。

這是我flexslider.js：http://pastebin.com/3YgKEFB4

Answer 1

flexslider不支持多行。您必須自己編碼或讓某人爲您添加功能

Answer 2

嘗試使用此方法。 我試圖和它的工作對我來說:)

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

它爲2行。它定義了一個函數來爲偶數幻燈片添加邊距，以使它們變得奇怪。 這種解決方案的來源是在這裏：

http://paulgonzaga.blogspot.com.es/2014/02/how-to-create-multiple-row-carousel-on.html?m=1

Answer 3

創建兩個單獨的滑塊，並在那裏你在Javascript中初始化它們使用前directionNav參數，使他們一起工作，如果他們是一個單一的兩排滑塊。這裏有一個例子：

#slider-row-1 .flex-direction-nav a { 
    top: 100%; 
} 

：所以它看起來像一個滑塊

$('#slider-row-1').flexslider({ 
    animation: "slide", 
    animationLoop: true, 
    before: function(slider){ 
     $('#slider-row-2').flexslider(slider.animatingTo); 
    }, // animates second row in sync with first row 
    controlNav: false, 
    directionNav: true, // shows navigation arrows 
    itemWidth: 210, 
    itemMargin: 5, 
    minItems: 4, 
    maxItems: 4, 
    slideshow: false 
    }); 

    $('#slider-row-2').flexslider({ 
    animation: "slide", 
    animationLoop: true, 
    controlNav: false, 
    directionNav: false, // hides navigation arrows 
    itemWidth: 210, 
    itemMargin: 5, 
    minItems: 4, 
    maxItems: 4, 
    slideshow: false 
    }); 

然後更新您的風格