javascript - Slick carousel - fade effect not working - Stack Overflow

admin管理员组

文章数量:1336666

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

Share Follow edited Jul 22, 2014 at 7:16 ride the whirlwinds asked Jul 22, 2014 at 5:22 ride the whirlwindsride the whirlwinds 29922 gold badges33 silver badges1717 bronze badges 5

• 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

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

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)

本文标签： javascriptSlick carouselfade effect not workingStack Overflow