Question

所以我有一个带有缩略图的轮播，在其中我可以动态获取产品图片。代码如下：

    <div id="carousel" class="carousel slide" data-ride="false">
      <div class="carousel-inner">
      <div class="item active srle">
      <img src="{{ featured_image | img_url: '1000x1000' }}" alt="{{ featured_image.alt | escape }}" data-product-featured-image>
      <p>{{ featured_image.alt | escape }}</p>
      </div>
      {% for image in product.images offset:1 %}
      <div class="item">
      <img src="{{ image.src | img_url: '1000x1000' }}" alt="{{ image.alt | escape }}">
      <p>{{ image.alt | escape }}</p>
      </div>
      {% endfor %}
      </div>
    </div>

  <div id="thumbcarousel" class="carousel slide thumbnails-carousel vertical" data-ride="false">
              <div class="carousel-inner">
        {% cycle 'section-group-1': '<div class="item active">', '' %}
      {% for image in product.images limit:4 %}
      {% assign imgposition = image.position | minus: 1  %}
      <div class="grid__item carousel-padding">
        <div data-target="#carousel" data-slide-to="{{ imgposition }}" class="thumb"><img src="{{ image.src | img_url: '160x160' }}" alt="{{ image.alt | escape }}" data-product-single-thumbnail></div>
 </div>
 {% endfor %}
   {% cycle 'section-group-1': '', '</div>' %}

   {% cycle 'section-group-2': '<div class="item">', '' %}
 {% for image in product.images limit:4 offset:4 %}
       {% assign imgposition = image.position | minus: 1  %}
 <div class="grid__item carousel-padding">
   <div data-target="#carousel" data-slide-to="{{ imgposition }}" class="thumb"><img src="{{ image.src | img_url: '160x160' }}" alt="{{ image.alt | escape }}" data-product-single-thumbnail></div>
</div>
{% endfor %}
{% cycle 'section-group-2': '', '</div>' %}
{% if product.images.size > 4 %}
{% cycle 'section-group-2': '<div class="item">', '' %}
{% for image in product.images limit:4 offset:8 %}
      {% assign imgposition = image.position | minus: 1  %}
<div class="grid__item carousel-padding">
<div data-target="#carousel" data-slide-to="{{ imgposition }}" class="thumb"><img src="{{ image.src | img_url: '160x160' }}" alt="{{ image.alt | escape }}" data-product-single-thumbnail></div>
</div>
{% endfor %}
{% cycle 'section-group-2': '', '</div>' %}
{% endif %}
{% if product.images.size > 8 %}
{% cycle 'section-group-2': '<div class="item">', '' %}
{% for image in product.images limit:4 offset:12 %}
      {% assign imgposition = image.position | minus: 1  %}
<div class="grid__item carousel-padding">
<div data-target="#carousel" data-slide-to="{{ imgposition }}" class="thumb"><img src="{{ image.src | img_url: '160x160' }}" alt="{{ image.alt | escape }}" data-product-single-thumbnail></div>
</div>
</div>
</div>

如您所见，我正在创建一个周期，将产品图像分成4组，因此在缩略图轮播中一次只能看到4个。这行得通，但是如您所见，这有点乏味，所以我想知道是否有人有更好的解决方案？

偏移偏移4秒钟循环浏览产品图片

0 个答案: