Shopify 特色产品滑块答案

【问题标题】：Shopify Featured Product SliderShopify 特色产品滑块
【发布时间】：2014-12-11 17:52:35
【问题描述】：

所以我有一个 Shopify 网站的特色部分，我最初打算设置一组静态数据，然后每隔几秒钟让特色产品淡入/淡出。但是，我的 JS 没有工作，但我很积极，这是正确的。这是 Shopify 本身的问题吗？如果有人可以向我解释一种淡入/淡出或为特定 div 创建迷你滑块的方法，我将不胜感激。

我试图淡出 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>

【问题讨论】：

标签： javascript jquery html css shopify

【解决方案1】：

这是一个快速滑块示例。我确信有更优雅的方法可以达到相同的效果。我只是从 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

【讨论】：