Question

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

谢谢。

Answer 1

一个简单的解决方案可能是将bulkCmd <li>与设置display:inline-block，overflow:auto以及父列表中的宽度相结合：

HTML：

white-space:nowrap

CSS：

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

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

如何将缩略图滚动到网站

1 个答案: