2016-05-13 7 views
2

ここが目標です:すべてのカードをスクロールするために左右の矢印をクリックするカードカルーセルを作りたいと思います。カルーセルを後で見るためにカードを水平に積み重ねる方法は?

これを行うための私の好みの方法:矢印を押したときにcard-deckを積み重ねて次のcard-deckに移行します。明確にするためには:一度にcard-deckの1つしか見ることはできませんが、私はそれらを横につなげることができるように横に並べておきます。

は、今のところ私はすべてのcard-deck sが(私は、ブートストラップ4でフレックスオプションを使用していますので、ラッピングは、ここで適用される)全幅であるため、明らかに縦にカードデッキをスタックします

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

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

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

を得ました。さて、どうやってそれらを100%幅にするのですか?水平に積み重ねて、あとでオーバーフローを隠してデッキをスクロールすることができますか?

私はあらゆる種類のものを試しましたが、私は実際にこの方法を知りません。ここではそれを設定するあなたにいくつかの時間を節約するフィドルです:

jsfiddle

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

+1

各デッキにカルーセル項目を作成します。http: //www.codeply.com/go/WEbiqQvGhy – ZimSystem

+0

@Skellyよ、完全にその可能性を見落とした。それから適切な答えを作り、私はすぐに受け入れます。どうもありがとう! – Yorrd

答えて

0

あなたは、各card-deckカルーセル項目を作成し、ブートストラップのカルーセル()コンポーネントを使用することができます。..

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

の作業例:http://codeply.com/go/WEbiqQvGhy

Update using Bootstrap 4 alpha 6

+0

フレックス・ボックス・バージョンのブートストラップを使用している場合、 'carousel-item'クラスで' card-deck'の周りに別のラッパーを使用する必要があることに注意してください。さもなければ、 'card-deck' cssがオーバーライドされます(特に' display:block') – Yorrd

関連する問題