如何在网站上添加缩略图滚动条

Question

如何在网站上添加缩略图滚动条

3

如果我的网站主题（timber）使用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;
  }
}

目前我所有的缩略图都被显示了，我应该怎么做才能只显示一行并让其余的滚动呢？以下是我的网站链接：http://www.hobime.com/collections/arrives-in-1-week/products/spider-man-carnage-fine-art-statue-1-6-scaled-figure?variant=7423987201。谢谢。

- Mark Ryan Estipona

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Zach Esposito · Answer 1

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