Wie man einen div Inhalt machen versteckt, wenn es Überlauf ist auf der rechten Seite

Question

ich dieses obere Bild haben, ich brauche einen Effekt mit CSS und JavaScript zu erreichen; Auf meiner Seite erlaube ich Benutzern, bis zu 12 Bilder zu ihrem Konto hinzuzufügen, und alle Bilder werden im darunterliegenden div angezeigt.

Wenn ein Benutzer weniger als 5 Fotos hat, wird das div mit rotem Rahmen ausgeblendet, und wenn ein Benutzer mehr als 5 Fotos hat, wird das div mit rotem Rahmen mit den 2 Pfeilen – eins auf der linken und das andere auf angezeigt auf der rechten Seite – und klicken Sie auf den Pfeil nach rechts, um die Fotos nach links zu verschieben, bis das letzte Foto angezeigt wird.

Wie kann ich dies mit CSS und JavaScript erreichen? Ich habe versucht, den Überlauf für das Div zu verwenden, aber was ich bekam, war nicht das, was ich brauchte.

Irgendwelche Hilfe von irgendjemandem?

Mein HTML und CSS ist unten:

.mycarousel-container { 
 
    border: 1px solid red; 
 
    width: 650px; 
 
    min-height: 140px; 
 
    max-height: auto; 
 
    overflow-x: hidden; 
 
    position: relative; 
 
    left: 0px; 
 
    z-index: 0; 
 
} 
 
#carousel_control_left { 
 
    float: left; 
 
    margin-top: 60px; 
 
    color: #b0b0b0; 
 
    font-size: 18px; 
 
} 
 
#carousel_control_right { 
 
    float: right; 
 
    margin-top: 60px; 
 
    color: #b0b0b0; 
 
    font-size: 18px; 
 
} 
 
.mycarousel { 
 
    border: 1px solid #ccc; 
 
    width: 102px; 
 
    height: 102px; 
 
    margin: 15px 15px 15px 4px; 
 
    float: left; 
 
    border-radius: 2px; 
 
}

<div class="row"> 
 
    <div class="col-md-12"> 
 
    <div><small class="text-muted">This listing has 6 photos. Add up to 6 more for free.</small> 
 
    </div> 
 
    <div class="mycarousel-container" style="padding-left:0;padding-right:0;"> 
 
     <span id="carousel_control_left"><i class="glyphicon glyphicon-chevron-left"></i></span> 
 
     <span id="carousel_control_right"><i class="glyphicon glyphicon-chevron-right"></i></span> 
 
     <div class="mycarousel"> 
 
     <img src="1465929515_Money.png" class="img img-thumbnail"> 
 
     </div> 
 
     <div class="mycarousel"> 
 
     <img src="1465929515_Money.png" class="img img-thumbnail"> 
 
     </div> 
 
     <div class="mycarousel"> 
 
     <img src="1465929515_Money.png" class="img img-thumbnail"> 
 
     </div> 
 
     <div class="mycarousel"> 
 
     <img src="1465929515_Money.png" class="img img-thumbnail"> 
 
     </div> 
 
     <div class="mycarousel"> 
 
     <img src="1465929515_Money.png" class="img img-thumbnail"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Der Link zu jsFiddle

Answer 1

Darf ich nicht Hinzufügen dieser beiden Pfeile deuten darauf hin, und der Browser die Arbeit machen zu lassen für Du?

Setzen Sie einfach overflow-x: auto auf den enthaltenen div. Dadurch wird das Scrollen ermöglicht, sodass alle nativen Funktionen (z. B. Zwei-Finger-Swiping) so funktionieren, wie der Benutzer sie für die Plattform erwartet, auf der sie sich befinden. Dies ist eine viel bessere Lösung, als UI-Komponenten auf eine Weise neu zu erfinden, die Benutzer nicht erwarten.