web-dev-qa-db-ja.com

複数の行を持つカルーセルを作成するにはどうすればよいですか？

複数の行があるカルーセルを探しています。たとえば、3行-9アイテム。 jQueryカルーセルはNiceですが、1行のカルーセルしか見つかりません。

この設定が必要です。これは可能ですか？

enter image description here

jquerycarousel
8
Caspert

私は最近この問題に遭遇し、他にもたくさんの機能があるので Slick.js を使いたいと思いました。各画像（div内に設定）を「スライド」として設定し、一度に表示するスライドの数を選択できます。

Slick.jsで複数の行を作成するには、画像を含むdivを別のdivにネストします。このdivは、slickが1つのスライドとして表示します。次に、子divをフロートさせて、画像のグリッドを作成します。これを行うには多くの方法があります。また、画像を新しい行に分割するために「clear：both」CSSを設定した改行を使用しました。

2x2グリッドに関連するコードは次のとおりです。

HTML

<div class="slider">

    <!-- This will be considered one slide -->
    <div>    
        <div class="grandchild">
            <img src="" />
        </div>
        <div class="grandchild">
            <img src="" />
        </div>

        <br class="clearboth">

        <div class="grandchild">
            <img src="" />
        </div>
        <div class="grandchild">
            <img src="" />
        </div>
    </div>

    <!-- The second slide -->
    <div>
        <div class="grandchild">
            <img src="" />
        </div>
            ...
    </div>
</div>

CSS

.grandchild {
    float: left;
}
.clearboth {
    clear: both;
}

JS

$(document).ready(function() {
    $('.slider').slick({
        slidesToShow: 1,
        slidesToScroll: 1
    });
});
5
potatomato

Slickにはrowsというパラメータがあります。これは、次のように役立ちます。

$('.b-grid-item').slick({
    infinite: true,
    slidesToShow: 5,
    slidesToScroll: 5,
    rows: 3
});

これにより、5列3行のグリッドが生成されます。これで唯一の障害。アイテムは上から下に流れるので、最初の行には1、4、7、...の順序があります。

2
Philip

そのためには、各スライダーアイテムが独自のグリッドである必要があります。

例えば：

<div class="slider">
    <div class="item">
        <ul class="grid">
            <li></li>
            <li></li>
            <li></li>
            …
        </ul>
    </div>
    <div class="item">
        <ul class="grid">
            …
</div>
1
feeela