如何将缩略图滚动到站点

Question

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

这是我的产品页面代码的 sn-p：

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

谢谢。

Answer 1

一个简单的解决方案可能是将<li>s 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