title: Slick carousel - fade effect not working
body: <p>Having an issue using Slick carousel, am trying to use the fade effect but for some reason the images just all appear listed vertically in a column. <a href="http://jsfiddle.net/Q4srX/6/" rel="nofollow">http://jsfiddle.net/Q4srX/6/</a></p>
  
  <p>I was able to get the auto play effect working (along with the other sliders) as described on the website (<a href="http://kenwheeler.github.io/slick/" rel="nofollow">http://kenwheeler.github.io/slick/</a>) but as soon as I tried fade I got the result listed above.</p>
  
  <p>Any ideas or help resolving this?</p>
  
  <p>javascript</p>
  
  <pre><code>{% block javascripts %}
          {% javascripts
              'bundles/symfony/js/slick.min.js'
          %}
              &lt;script src="//code.jquery.com/jquery-1.11.0.min.js"&gt;&lt;/script&gt;
              &lt;script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"&gt;&lt;/script&gt;
              &lt;script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.3.6/slick.min.js"&gt;&lt;/script&gt;
          {% endjavascripts %}
  
          {# Slick Carousel #}
          &lt;script type="text/javascript"&gt;
              $(document).ready(function(){
                  $('.fade').slick({
                      dots: true,
                      infinite: true,
                      speed: 500,
                      fade: true,
                      slide: '&gt; div',
                      cssEase: 'linear'
                  });
              });
          &lt;/script&gt;
  {% endblock %}
  </code></pre>
  
  <p>html</p>
  
  <pre><code>{% block carousel %}
  &lt;div class="row"&gt;
      &lt;div class="large-12 columns"&gt;
          &lt;div class="hide-for-small"&gt;
          &lt;div id="featured"&gt;
              &lt;div class="fade"&gt;
                  &lt;div&gt;&lt;img src="http://placehold.it/1000x800&amp;text=Slide Image" alt="slide image"&gt;&lt;/div&gt;
                  &lt;div&gt;&lt;img src="http://placehold.it/1000x800&amp;text=Slide Image" alt="slide image"&gt;&lt;/div&gt;
                  &lt;div&gt;&lt;img src="http://placehold.it/1000x800&amp;text=Slide Image" alt="slide image"&gt;&lt;/div&gt;
                  &lt;div&gt;&lt;img src="http://placehold.it/1000x800&amp;text=Slide Image" alt="slide image"&gt;&lt;/div&gt;
                  &lt;div&gt;&lt;img src="http://placehold.it/1000x800&amp;text=Slide Image" alt="slide image"&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="row"&gt;
              &lt;div class="small-12 show-for-small"&gt;&lt;br&gt;
                  &lt;img src="http://placehold.it/1000x600&amp;text=For Small Screens"/&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  {% endblock %}
  </code></pre>