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. /

I was able to get the auto play effect working (along with the other sliders) as described on the website (/) 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/jquery-1.11.0.min.js"></script>
            <script src="//code.jquery/jquery-migrate-1.2.1.min.js"></script>
            <script type="text/javascript" src="//cdn.jsdelivr/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=";text=Slide Image" alt="slide image"></div>
                <div><img src=";text=Slide Image" alt="slide image"></div>
                <div><img src=";text=Slide Image" alt="slide image"></div>
                <div><img src=";text=Slide Image" alt="slide image"></div>
                <div><img src=";text=Slide Image" alt="slide image"></div>
            </div>
        </div>
        </div>

        <div class="row">
            <div class="small-12 show-for-small"><br>
                <img src=";text=For Small Screens"/>
            </div>
        </div>
    </div>
</div>
{% endblock %}

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/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./jquery-1.11.0.min.js"></script>
            <script src="//code.jquery./jquery-migrate-1.2.1.min.js"></script>
            <script type="text/javascript" src="//cdn.jsdelivr/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 %}

• javascript
• jquery
• html
• carousel

• I can't see any jquery script, jquery library in the jsfiddle shared.. – Bhushan Kawadkar Commented Jul 22, 2014 at 5:25
• Added the jquery code to the jsfiddle link, it's also listed in the post. http://jsfiddle/Q4srX/2/ – ride the whirlwinds Commented Jul 22, 2014 at 5:28
• I did not see 'slick.min.js' in external resources and there is no jquery script inside script section of the jsfiddle shared in the post. Could you please update jsfiddle and edit it in your post? – Bhushan Kawadkar Commented Jul 22, 2014 at 5:30
• add slick.miin.js to jsfiddle/Q4srX/4 (I have removed script tag from jquery script as not required and added jquery1.11.0 from the dropdown on left) – Bhushan Kawadkar Commented Jul 22, 2014 at 5:32
• Added it as an external resource http://jsfiddle/Q4srX/6/ – ride the whirlwinds Commented Jul 22, 2014 at 5:41

1 Answer 1

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)