Slick carousel - fade effect not working

Question

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. http://jsfiddle.net/Q4srX/6/

I was able to get the auto play effect working (along with the other sliders) as described on the website (http://kenwheeler.github.io/slick/) but as soon as I tried fade I got the result listed above.

Any ideas or help resolving this?

javascript

{% block javascripts %}
        {% javascripts
            'bundles/symfony/js/slick.min.js'
        %}
            <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
            <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
            <script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.3.6/slick.min.js"></script>
        {% endjavascripts %}

        {# Slick Carousel #}
        <script type="text/javascript">
            $(document).ready(function(){
                $('.fade').slick({
                    dots: true,
                    infinite: true,
                    speed: 500,
                    fade: true,
                    slide: '> div',
                    cssEase: 'linear'
                });
            });
        </script>
{% endblock %}

html

{% block carousel %}
<div class="row">
    <div class="large-12 columns">
        <div class="hide-for-small">
        <div id="featured">
            <div class="fade">
                <div><img src="http://placehold.it/1000x800&text=Slide Image" alt="slide image"></div>
                <div><img src="http://placehold.it/1000x800&text=Slide Image" alt="slide image"></div>
                <div><img src="http://placehold.it/1000x800&text=Slide Image" alt="slide image"></div>
                <div><img src="http://placehold.it/1000x800&text=Slide Image" alt="slide image"></div>
                <div><img src="http://placehold.it/1000x800&text=Slide Image" alt="slide image"></div>
            </div>
        </div>
        </div>

        <div class="row">
            <div class="small-12 show-for-small"><br>
                <img src="http://placehold.it/1000x600&text=For Small Screens"/>
            </div>
        </div>
    </div>
</div>
{% endblock %}

Solution

You are missing some few points which are also explained here.

• the slick.css file is missing
• the js is looking for $('.fade'), but your element is called <div class="your-class">

Your markup should actually look like this:

<div class="fade"> <!-- note the corrected class -->
    <div><img src="http://placehold.it/200x200&text=Slide 1" alt="slide 1" /></div>
    <div><img src="http://placehold.it/200x200&text=Slide 2" alt="slide 2" /></div>
    <div><img src="http://placehold.it/200x200&text=Slide 3" alt="slide 3" /></div>
    <div><img src="http://placehold.it/200x200&text=Slide 4" alt="slide 4" /></div>
    <div><img src="http://placehold.it/200x200&text=Slide 5" alt="slide 5" /></div>
</div>

Here is an update which works as expected: [ fiddle ] (The slick.css file is included and I stripped the unnecessary html for your script)

Comments

[ride the whirlwinds]

Thank you that works! The part of the code that was breaking it was slide: '> div',, once I commented that out and the div/js name matched it worked. Odd as that's what the code they have on their website to use that. Thanks for the solution! Rockstar!

[chrona]

No problem; the reason why the offical fade solution has slide: '> div' is because the markup there is actually <div><div class="image"><img></div></div>.