Question

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

Answer 1

您遗漏了一些也被解释为here的点。

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

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

光滑的旋转木马 - 淡化效果不起作用

1 个答案: