как нарисовать эскиз прокрутки на сайт

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

Все мои эскизы в настоящее время отображается. Что я должен сделать, чтобы сделать так, чтобы отображалась только 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