Question

我在Wordpress网站上使用FlexSlider。一切都很好。但我希望我的画廊可见2排。我搜索了它但没有找到解决方案。

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

Answer 1

尝试这种方法。我试过了，它对我有用：）

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 2

flexslider不支持多行。您将需要自己编写代码或让某人为您添加功能

Answer 3

创建两个单独的滑块，在Javascript中初始化它们，使用before和directionNav参数使它们一起工作，就好像它们是一个双行滑块一样。这是一个例子：

   $('#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
  });

然后更新您的样式，使其看起来像一个滑块：

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

如何为FlexSlider添加多行支持？

3 个答案: