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

Question

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