Shopify Featured Product Slider

Question

Итак, у меня есть часть раздела с сайтом Shopify, вначале я собирался создать массив статических данных, и через каждые несколько секунд каждый раз затухание в нем выпадало. Тем не менее, мой JS пока не работает, я ПОЗИТИВНО, это правильно. Это проблема с самим Shopify? Если бы кто-нибудь мог объяснить мне способ угасания/выхода или создания мини-слайдера для конкретного div, я бы очень это оценил.

Я пытался исчезать из DIV «.big-продукт»

Вот скриншот для дальнейшей визуализации.

<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

Вот быстрый пример слайдер. Я уверен, что есть более элегантные способы достижения такого же эффекта. Я просто вытаскиваю «шаблон» контента из массива функций и помещаю его в 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