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

flexslider は複数の行をサポートしていません。自分でコーディングするか、誰かに機能を追加してもらう必要があります

于 2013-12-11T16:29:20.330 に答える
0

2 つの個別のスライダーを作成し、Javascript でそれらを初期化する場所では、before パラメーターと directionNav パラメーターを使用して、単一の 2 行スライダーであるかのように連携させます。次に例を示します。

   $('#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 に答える