Erstellen Sie Karussell aus zwei Zeilen (Listen) mit CSS, jQuery

Question

Ich arbeite auf einer geschlossenen Plattform (JetShop) und während ich Skripte aller Art hinzufügen kann, kann ich nicht auf die vorgebauten zugreifen, um sie zu ändern Kundenbedürfnisse.

Ich brauche ein Karussell aus verwandten Produkten zu machen, die in zwei Reihen, wie es angebracht werden:

<div class="all-products"> 
    <ul class="one-row first-row"> 
    <li class="item"></li> 
    <li class="item"></li> 
    <li class="item"></li> 
    <li class="item"></li> 
    </ul> 
    <ul class="one-row second-row"> 
    <li class="item"></li> 
    <li class="item"></li> 
    <li class="item"></li> 
    <li class="item"></li> 
    </ul> 
</div> 

und CSS, die folgt:

.one-row { 
    max-width: 1200px; 
    margin-left: auto; 
    margin-right: auto; 
} 

.second-row { 
    margin-top: 20px; 
} 

.item { 
    display: inline-block; 
    width: 22%; 
    height: 100px; 
    margin-right: 3%; 
    background: gray; 
} 

.item:nth-of-type(4n+0) { 
    margin-right: 0; 
} 

Dies ist, wie es sich verhält: https://jsfiddle.net/sr3rnm84/

Also, um klar zu sein, kann ich kein HTML auf dieser Seite bearbeiten und ich muss alle 8 Elemente in einer Zeile mithilfe von CSS platzieren. Nur dann kann ich jQuery verwenden, um Karussell daraus zu machen.

Irgendwelche Gedanken?

Answer 1

Die Antwort ist white-space: nowrap:

.one-row { 
    max-width: 1200px; 
    margin-left: auto; 
    margin-right: auto; 
    white-space: nowrap; 
} 

Wenn Sie alle 8 Elemente in einer einzigen Zeile platzieren möchten, können Sie auch das gleiche für .all-products verwenden:

.all-products { 
    white-space: nowrap; 
} 

Fiddle: https://jsfiddle.net/5p6xo6fh/ und https://jsfiddle.net/zdmxcb5g/