2

目標は次のとおりです。左右の矢印をクリックしてすべてのカードをスクロールできるカード カルーセルを作成したいと考えています。

これを行う私の好みの方法:矢印が押されたときにcard-decks を積み重ねて次へ移行します。card-deck明確にするために、一度に 1 つしか表示されませんがcard-deck、横に並べてそれらの間で CSS トランジションできるようにしたいと考えています。

今私は得た

<row>
    <card-deck>
        <card/> x 3
    </card-deck>

    <card-deck>
        <card/> x 3
    </card-deck>

    <card-deck>
        <card/> x 3
    </card-deck>
</row>

card-deckすべての s が全幅であるため、明らかにカードデッキを垂直に積み重ねます(ブートストラップ 4 で flex オプションを使用しているため、ここではラッピングが適用されます)。さて、後でオーバーフローを非表示にしてデッキをスクロールできるように、それらを 100% 幅にして水平方向に積み重ねるにはどうすればよいでしょうか?

私はあらゆる種類のことを試しましたが、これに行く方法が本当にわかりません。セットアップの時間を節約するためのフィドルを次に示します。

jsfiddle

また、フレックスが有効になっている最新のアルファ 4 ブートストラップ CDN を知っている場合は、お知らせください。私が使っているのは数日前のものです。

4

1 に答える 1

0

それぞれcard-deckをカルーセル アイテムにして、Bootstrap の carousel() コンポーネントを使用できます。

<div class="carousel-inner">
       <div class="card-deck carousel-item">
             <div class="card">
                    ...

作業例: http://codeply.com/go/WEBiqQvGhy

Bootstrap 4 alpha 6 を使用して更新する

于 2016-05-17T17:13:03.263 に答える