Javascript Shopify特色产品滑块

因此，我有一个Shopify网站的特色部分，我最初打算建立一个静态数据数组，让特色产品每隔几秒钟淡入淡出一次。然而，我的JS没有工作，但我肯定它是正确的。这是Shopify本身的问题吗？如果有人能向我解释一种淡入淡出的方式，或者为特定的div创建一个迷你滑块，我将非常感激

我正试图淡出div“大产品”

下面是一个屏幕截图，以进一步可视化。

特色产品
{%if collections.frontpage.products.size>0%}

{{product.vendor}}

{{product.description | strip|u html | truncatewords:40 | escape_html}
{%if product.variants.size==1%}
{%else%}
{product.variants%中的变量为%0}
{%if variant.available%}
{{{variant.title | escape}}用于{{{variant.price | money}}
{%else%}
{{variant.title | escape}}&mdash；售罄
{%endif%}
{%endfor%}
{%endif%}

{{product.tags | join:'，'}

---

下面是一个快速滑块示例。我相信有更优雅的方法可以达到同样的效果。我只是从features数组中提取内容“模板”并将其放入feature 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);

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

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