使用 CSS、jQuery 从两行（列表）中创建轮播

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 个项目放在一行中。只有这样我才能使用 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;
}

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

使用 CSS、jQuery 从两行（列表）中创建轮播

Create carousel out of two rows (lists) with CSS, jQuery

html

css

jquery

carousel