javascript - Shopify 特色产品 slider

Question

所以我有一个 Shopify 网站的特色部分，我最初打算设置一个静态数据数组，并让特色产品每隔几秒淡入/淡出。但是，我的 JS 还没有工作，但我肯定它是正确的。这是Shopify本身的问题吗？如果有人能向我解释淡入/淡出或为特定 div 创建迷你 slider 的方法，我将非常感激。

我试图淡出 div“.big-product”

这是进一步可视化的屏幕截图。

<h2 class="light">Featured Products</h2>
  {% if collections.frontpage.products.size > 0 %}
    <div class="big-product" id="featprod">

      <div class="product-image" id="product-image">
        <a href="{{ product.url | within: collections.frontpage }}" title="{{ product.title             | escape }} &mdash; {{ product.description | strip_html | truncate: 50 | escape }}"><img src=" {{ product.images.first | product_img_url: 'medium' }}" alt="{{ product.title | escape }}" />                </a>

<div class="product-info">
<h3 class="title"><a href="{{ product.url | within: collections.frontpage }}">{{ product.title }}</a></h3>
<p class="price">
  {{ product.vendor }}
</p>


<p class="description">{{ product.description | strip_html | truncatewords: 40 | escape_html }}</p>

<form action="/cart/add" method="post">
  {% if product.variants.size == 1 %}
    <!-- If there is only 1 variant, only show the purchase button -->
    <input type="hidden" name="id" value="{{ product.variants.first.id }}" id="variant-{{ variant.id }}" />
  {% else %}
    <select name="id">
          {% for variant in product.variants %}
            {% if variant.available %}
                <option value="{{ variant.id }}" id="variant-{{ variant.id }}">             
                {{ variant.title | escape }} for {{ variant.price | money }}
                </option>
            {% else %}
              <option value="{{ variant.id }}" id="variant-{{ variant.id }}" disabled="disabled" class="disabled">              
                {{ variant.title | escape }} &mdash; SOLD OUT
                </option>
            {% endif %}
            {% endfor %}
        </select>
    {% endif %}

  <input type="submit" href="{{ product.url }}" class="button" name="add" value="add to cart" />
  <a href="{{ product.url | within: collections.frontpage }}" class="button">details</a>
</form>

<p class="tags alt">
  {{ product.tags | join: ', ' }}
</p>

Answer 1

这是一个快速 slider 示例。我相信有更优雅的方法可以达到同样的效果。我只是从功能数组中提取内容"template"并将其放入功能 div 中。然后淡入内容。

var start = 1;

function moveSlider () {  
  $feature.children('div').remove();
  $feature.html(features[start]);
  $feature.children('div').fadeIn();
  start++;

  if (start == features.length) {
    start = 0;
  }
};

setInterval(function () {
  moveSlider();
}, 3000);

Demo