CSS、jQueryで2行（リスト）からカルーセルを作成

Question

私は閉鎖型プラットフォーム（JetShop）で作業していますが、どのタイプのスクリプトも追加できますが、クライアントのニーズ。次の

<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> 

とCSS：

.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; 
} 

これは、それがどのように動作するかです：

は、私はこのように、二列に配置されている関連製品のうちカルーセルを作成する必要がありhttps://jsfiddle.net/sr3rnm84/

このページではHTMLを編集できないため、CSSを使用して8つのアイテムをすべて1行に配置する必要があります。それだけでjQueryを使ってカルーセルを作ることができます。

どのような考えですか？

Answer 1

答えはwhite-space: nowrapです：

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

あなたが一列に全8つのアイテムを配置したい場合は、同様.all-productsのための同じを使用してください：

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

フィドル：https://jsfiddle.net/5p6xo6fh/をそしてhttps://jsfiddle.net/zdmxcb5g/