admin管理员组文章数量:1335166
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 %}
Share
edited Jul 22, 2014 at 7:16
ride the whirlwinds
asked Jul 22, 2014 at 5:22
ride the whirlwindsride the whirlwinds
2992 gold badges3 silver badges17 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
1 Answer
Reset to default 3You 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
版权声明:本文标题:javascript - Slick carousel - fade effect not working - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742221181a2435451.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论