Bootstrap4：マルチイメージカルーセル

Question

私はこのバージョンのマルチイメージカルーセルをブートストラップ4に使っていましたが、3の代わりに4つのイメージを表示する方法を理解できません。 コード：https://www.codeply.com/go/s3I9ivCBYH/multi-carousel-single-slide-bootstrap-4

Answer 1

ブートストラップは、ページを12等分するために使用されるcolsを使用します。ですから、最初にスライドdivを4ではなくcol-md-3に変更する必要があります。これにより、それぞれ33.33（4/12）ではなく25％（3/12）幅になります。

class = "カルーセルCOL-MD-4活性アクティブ "

-to-

クラス= "カルーセル項目COL-MD-3"

別加算することにより次の変更" .carousel-を-itemアイテム "：

/* show 3 items */ 
.carousel-inner .active, 
.carousel-inner .active + .carousel-item, 
.carousel-inner .active + .carousel-item + .carousel-item { 
    display: block; 
} 

/* show 4 items */ 
.carousel-inner .active, 
.carousel-inner .active + .carousel-item, 
.carousel-inner .active + .carousel-item + .carousel-item, 
.carousel-inner .active + .carousel-item + .carousel-item + .carousel-item { 
    display: block; 
} 

、最終的には別の「.carousel項目」を追加することによって、ここに見えるスライドの1以上を作る

に：

/*make 4 slides visible*/ 
.carousel-inner .active.carousel-item + .carousel-item + .carousel-item + .carousel-item { 
     position: absolute; 
     top: 0; 
     right: -33.3333%; 
     z-index: -1; 
     display: block; 
     visibility: visible; 
    }