Karussell Schieberegler mit Flexbox, verhindert horizontale Bildlauf

Question

Ich versuche Karussell Slider mit Flexbox zu machen. Das Problem ist, dass ich nur 4 Elemente anzeigen und Scrollen verhindern muss, während .carousel volle Breite nimmt und alle Elemente mit Bildlauf anzeigt. Ist dies mit flexbox möglich?

.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

Dies kann mit einigen leichten Änderungen an Ihrem Code erfolgen. Ich habe Ihren drei Containern in der Flex-Reihe sowie overflow: scroll und white-space: nowrap Flex-Grow-Eigenschaften zu Ihrem Karussell hinzugefügt und setzen Sie Ihre .item auf 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>