title: Shopify Featured Product Slider
body: <p>So I have a featured section part of a Shopify website, I initially was going to set up an array of static data and have the featured product fade in/out every few seconds through that. However, my JS isn't working yet I am POSITIVE it's correct. Is this a problem with Shopify itself? If anyone could explain to me a way of fading in/out or creating a mini slider for the specific div i'd really appreciate it.</p>
  
  <p>I was attempting to fade out the div ".big-product"</p>
  
  <p>Here is a screenshot to further visualize.
  <img src="https://i.stack.imgur.com/7j7Jk.png" alt="featured product"></p>
  
  <pre><code>&lt;h2 class="light"&gt;Featured Products&lt;/h2&gt;
    {% if collections.frontpage.products.size &gt; 0 %}
      &lt;div class="big-product" id="featprod"&gt;
  
        &lt;div class="product-image" id="product-image"&gt;
          &lt;a href="{{ product.url | within: collections.frontpage }}" title="{{ product.title             | escape }} &amp;mdash; {{ product.description | strip_html | truncate: 50 | escape }}"&gt;&lt;img src=" {{ product.images.first | product_img_url: 'medium' }}" alt="{{ product.title | escape }}" /&gt;                &lt;/a&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>&lt;div class="product-info"&gt;
  &lt;h3 class="title"&gt;&lt;a href="{{ product.url | within: collections.frontpage }}"&gt;{{ product.title }}&lt;/a&gt;&lt;/h3&gt;
  &lt;p class="price"&gt;
    {{ product.vendor }}
  &lt;/p&gt;
  
  
  &lt;p class="description"&gt;{{ product.description | strip_html | truncatewords: 40 | escape_html }}&lt;/p&gt;
  
  &lt;form action="/cart/add" method="post"&gt;
    {% if product.variants.size == 1 %}
      &lt;!-- If there is only 1 variant, only show the purchase button --&gt;
      &lt;input type="hidden" name="id" value="{{ product.variants.first.id }}" id="variant-{{ variant.id }}" /&gt;
    {% else %}
      &lt;select name="id"&gt;
            {% for variant in product.variants %}
              {% if variant.available %}
                  &lt;option value="{{ variant.id }}" id="variant-{{ variant.id }}"&gt;             
                  {{ variant.title | escape }} for {{ variant.price | money }}
                  &lt;/option&gt;
              {% else %}
                &lt;option value="{{ variant.id }}" id="variant-{{ variant.id }}" disabled="disabled" class="disabled"&gt;              
                  {{ variant.title | escape }} &amp;mdash; SOLD OUT
                  &lt;/option&gt;
              {% endif %}
              {% endfor %}
          &lt;/select&gt;
      {% endif %}
  
    &lt;input type="submit" href="{{ product.url }}" class="button" name="add" value="add to cart" /&gt;
    &lt;a href="{{ product.url | within: collections.frontpage }}" class="button"&gt;details&lt;/a&gt;
  &lt;/form&gt;
  
  &lt;p class="tags alt"&gt;
    {{ product.tags | join: ', ' }}
  &lt;/p&gt;
  </code></pre>
  
  <p></p>
  
  <p></p>