jquery - 如何将缩略图滚动到站点

如果网站主题（木材）使用csswizardry，如何合并缩略图滚动？

这是我的产品页面代码的片段：

    {% if product.images.size > 1 %}
      <ul class="product-photo-thumbs grid-uniform mThumbnailScroller" data-mts-axis="x" id="productThumbs">

        {% for image in product.images %}
          <li class="grid-item medium-down--one-quarter large--one-quarter">
            <a href="{{ image.src | img_url: 'large' }}" class="product-photo-thumb">
              <img src="{{ image.src | img_url: 'compact' }}" alt="{{ image.alt | escape }}">
            </a>
          </li>
        {% endfor %}

      </ul>
    {% endif %}

这是css部分：

.product-photo-container {
  margin-bottom: $gutter;
  max-width: 100%;
}

.product-photo-container,
.product-photo-thumbs {
  a, img {
    display: block;
    margin: 0 auto;
  }

  li {
    margin-bottom: $gutter;
  }
}

#productThumbs{
  overflow: auto;
  width: auto;
  height: auto;
}

@include at-query($min, $large) {
  // Image zoom
  .image-zoom {
    display: inline-block;
    cursor: move;
  }
}

当前正在显示我的所有缩略图。我应该怎么做才能只显示1行，其余的会滚动？这是我的网站的链接：http://www.hobime.com/collections/arrives-in-1-week/products/spider-man-carnage-fine-art-statue-1-6-scaled-figure?variant=7423987201

谢谢。

最佳答案

一个简单的解决方案可能是将<li>的display:inline-block与设置overflow:auto，white-space:nowrap和父级列表上的宽度组合在一起：

HTML：

<ul class="product-photo-thumbs">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
</ul>

CSS：

.product-photo-thumbs {
  margin:1em;
  font-family:arial, sans-serif;
  width:400px;
  overflow:auto;
  white-space:nowrap;

  li {
    font-size:2em;
    display:inline-block;
    margin-right:1em;
    width: 40px;
    height: 40px;
    border:2px solid #777;
  }
}

CodePen上的示例：http://codepen.io/zesposi/pen/dYJzXq

关于jquery - 如何将缩略图滚动到站点，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/33213739/