javascript 光滑的旋转木马 - 淡入淡出效果不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24879497/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Slick carousel - fade effect not working
提问by ride the whirlwinds
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/
使用 Slick carousel 时遇到问题，我正在尝试使用淡入淡出效果，但由于某种原因，图像只是垂直列在列中。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.
我能够按照网站 ( http://kenwheeler.github.io/slick/)上的描述使自动播放效果正常工作（以及其他滑块），但是一旦我尝试淡入淡出，我就得到了上面列出的结果。
Any ideas or help resolving this?
任何想法或帮助解决这个问题？
javascript
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
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 %}
回答by chrona
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">
- slick.css 文件丢失
- js 正在寻找
$('.fade')，但您的元素被称为<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)
这是一个按预期工作的更新：[ fiddle]（包含 slick.css 文件，我为您的脚本删除了不必要的 html）
