1

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

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

4

3 回答 3

3

试试这种方法。我已经尝试过了，它对我有用:)

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

于 2014-03-20T18:07:38.787 回答
0

创建两个单独的滑块，并在 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%;
}
于 2015-03-02T19:46:11.243 回答
0

flexslider 不支持多行。您要么必须自己编写代码，要么让别人为您添加功能

于 2013-12-11T16:29:20.330 回答