Question

所以我有一个Shopify网站的精选部分，我最初打算建立一个静态数据阵列，并通过它每隔几秒钟就会淡入/淡出特色产品。但是，我的JS没有工作，但我是积极的，这是正确的。这是Shopify本身的问题吗？如果有人能向我解释一种淡入/淡出或为特定div创建迷你滑块的方式，我真的很感激。

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

这是进一步可视化的屏幕截图。 featured 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

这是一个快速滑块示例。我确信有更优雅的方法可以达到同样的效果。我只是提取内容＆＃39;模板＆＃39;从features数组并将其放入功能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

Shopify特色产品滑块

1 个答案: