圆滑的转盘-淡入淡出效果不起作用

旋风

使用Slick轮播时遇到问题，我尝试使用淡入淡出效果，但由于某些原因，图像仅全部垂直显示在列中。http://jsfiddle.net/Q4srX/6/

如网站（http://kenwheeler.github.io/slick/）所述，我能够使自动播放效果（以及其他滑块）正常工作，但是一旦我尝试淡入淡出，我就会得到上面列出的结果。

有什么想法或帮助解决这个问题吗？

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 %}

历纳

您遗漏了一些要点，这里也作了解释。

slick.css文件丢失
js正在寻找$('.fade')，但是您的元素被称为<div class="your-class">

您的标记实际上应如下所示：

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

这是一个按预期方式工作的更新：[小提琴]（包含slick.css文件，我为您的脚本删除了不必要的html）

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。