フレックスボックス付きキャロルスライダ、水平スクロール防止

Question

フレックスボックスを使用してカルーセルスライダを作成しようとしています。 .carouselは全幅をとり、すべてのアイテムをスクロールして表示するのに対し、4アイテムだけを表示してスクロールを防止する必要があるという問題があります。 フレックスボックスでこれを行うことはできますか？

.main - container { 
    display: flex; 
    flex - direction: row; 
    overflow: hidden; 
    min - width: 0; 
} 

.prev, 
.next { 
    flex: initial; 
    width: 50 px; 
} 

.carousel { 
    flex: 1; 
} 

<div class="main-container"> 
    <div class="prev"></div> 
    <div class="carousel"> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div> 
    </div> 
    <div class="nex"></div> 
</div> 

Answer 1

これはあなたのコードに若干の変更を行うことができます。私はあなたのカルーセルにoverflow: scrollとwhite-space: nowrapだけでなく、フレックス行の3つのコンテナにフレックス成長プロパティを追加し、.itemをdisplay: inline-blockに設定しました。

.main-container { 
 
    display: flex; 
 
    flex-direction: row; 
 
    min-width: 0; 
 
} 
 

 
.prev, 
 
.next { 
 
    width: 50 px; 
 
    flex-grow: 1; 
 
    background-color: #fcfcfc; 
 
} 
 

 
.carousel { 
 
    flex-grow: 2; 
 
    background-color: #fbfbfb; 
 
    overflow: scroll; 
 
    white-space: nowrap; 
 
} 
 
    
 
.item { 
 
    display: inline-block; 
 
}

<div class="main-container"> 
 
    <div class="prev">&laquo;</div> 
 
    <div class="carousel"> 
 
    <div class="item"><img src="https://www.fillmurray.com/300/300"/></div> 
 
    <div class="item"><img src="https://www.fillmurray.com/300/300"/></div> 
 
    <div class="item"><img src="https://www.fillmurray.com/300/300"/></div> 
 
    <div class="item"><img src="https://www.fillmurray.com/300/300"/></div> 
 
    <div class="item"><img src="https://www.fillmurray.com/300/300"/></div> 
 
    <div class="item"><img src="https://www.fillmurray.com/300/300"/></div> 
 
    <div class="item"><img src="https://www.fillmurray.com/300/300"/></div> 
 
    </div> 
 
    <div class="nex">&raquo;</div> 
 
</div>