如何将缩略图滚动到站点

Posted 2023-05-08

【中文标题】如何将缩略图滚动到站点

【英文标题】：how to put thumbnail scroll to site

【发布时间】：2016-01-17 18:14:37

【问题描述】：

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

谢谢。

【参考方案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

【讨论】：

恐怕这不起作用:(它仍然显示没有滚动的整个缩略图..我猜csswizardry正在影响这个显示..