FlexSlider에 다중 행 지원을 추가하려면 어떻게합니까?

Question

내 Wordpress 사이트에 FlexSlider을 사용하고 있습니다. 모든 것은 잘 작동합니다. 하지만 난 내 갤러리 2 행을 볼 수 싶습니다. 나는 그것을 찾았지만 해결책을 찾지 못했습니다. http://pastebin.com/3YgKEFB4

Answer 1

flexslider이 여러 행을 지원하지 않습니다

이 내 flexslider.js입니다. 직접 코드를 작성하거나 다른 사람이 기능을 추가하도록해야합니다.

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

는 두 개의 슬라이더를 작성하고 당신이 자바 스크립트를 초기화 곳들이 하나 둘 행 슬라이더 것처럼 그들이 함께 작동하도록 전과 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 
    }); 

그런 다음 당신의 스타일을 업데이트 : 다음은 예입니다