如何将多行支持添加到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 
    }); 

然后更新您的风格