Как добавить поддержку нескольких строк в FlexSlider?

Question

Я использую FlexSlider на своем сайте Wordpress. Все работает хорошо. Но я хочу, чтобы моя галерея была видна в 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%;
}