javascript 光滑的滑块不工作高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25077731/
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 slider not working height
提问by Sky
I just discover the slick "the last carousel you will ever need"
我刚刚发现了“你将需要的最后一个旋转木马”
and i try to make some test with it bit nothing is working :/
我试着用它做一些测试，没有任何效果：/
i make a little code:
我做了一个小代码：
<link rel="stylesheet" type="text/css"href="//cdn.jsdelivr.net/jquery.slick/1.3.6/slick.css"/
<div class="sliderlastvideos">
{% for video in lastvideos %}
<div class="videocontainer">
<div class="video">
<img src="" alt="">
<div class="video-titre">Tritre video</div>
</div>
</div>
{% endfor %}
</div>
{% block javascript %}
<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>
<script>
$(document).ready(function(){
$('.sliderlastvideos').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 3
});
CSS
CSS
.videocontainer{
background-color: white;
margin: 10px;
text-align: center;
width: 40px;
height: 40px;
}
.video{
margin: 10px
}
img{
width: 100%
}
that's suppose to give me simple slider but give me a huge one on 2 line of videos.
这应该给我简单的滑块，但给我一个巨大的 2 行视频。
plz help me :p
请帮帮我:p
thanks
谢谢
采纳答案by Trader
I've fixed your jsfiddle, I've made some changes to the html structure too.
我已经修复了您的 jsfiddle，我也对 html 结构进行了一些更改。
The main problem seems that the slick plugin doesn't like that margin and width in the .videocontainer css class.
主要问题似乎是 slick 插件不喜欢 .videocontainer css 类中的边距和宽度。
Don't know if there is any bug in slick or we are initializing it incorrectly:
不知道slick 是不是有什么bug 或者我们初始化不正确：
.videocontainer {
background-color: white;
margin: 5px;
text-align: center;
}
.sliderlastvid{
width: 300px;
margin: 0px auto;
}
Update: When I go backwards in the slider, some videocontainers do show up below, only to be fixed right after. Check slick homepage for any issues you might have: http://kenwheeler.github.io/slick/
更新：当我在滑块中向后退时，一些视频容器确实显示在下方，然后才被修复。检查光滑的主页是否有您可能遇到的任何问题：http: //kenwheeler.github.io/slick/
回答by T J
You have typos so the library isn't being added added
您有拼写错误，因此不会添加库
<scripttype="text/javascript"src="//cdn.jsdelivr.net/jquery.slick/1.3.6/slick.min.js</script>
------^here and missing quotes-------------------^
Should be
应该
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.3.6/slick.min.js"</script>
You're also not closing the $(document).ready
你也没有关闭 $(document).ready
Fixing the errors in your browsers console should fix the issues. Afterwards check whether the libraries are added in resources.
修复浏览器控制台中的错误应该可以解决问题。然后检查是否在资源中添加了库。
BTW i'm wondering why you've a <br>inside the css?
顺便说一句，我想知道为什么你<br>在 css 里面？
