滑块未达到工作高度

Slick slider not working height

本文关键字：高度 工作 未达到      更新时间：2023-09-26

我刚刚发现了这个漂亮的"你将永远需要的最后一个旋转木马"

，我试着用它做一些测试，但没有任何工作:/

我写了一小段代码:

<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 

.videocontainer{
  background-color: white;
  margin: 10px;
  text-align: center;
  width: 40px;
  height: 40px;
}
.video{
  margin: 10px
}
img{
  width: 100%
}

应该给我一个简单的滑动条但是给我一个巨大的两行的视频

JSFIDDLE

请帮助我:p

谢谢

我已经修复了你的jsfiddle，我也对html结构做了一些改变。

主要问题似乎是光滑的插件不喜欢。videocontainer css类中的边距和宽度。

不知道是否有任何错误在光滑或我们初始化错误:

.videocontainer {
 background-color: white;
 margin: 5px;
 text-align: center;
}
.sliderlastvid{
 width: 300px;
 margin: 0px auto;
}
http://jsfiddle.net/4Dn3b/2/

更新:当我在滑块中后退时，一些视频容器确实显示在下面，只有在修复之后。检查slick主页是否有任何问题:http://kenwheeler.github.io/slick/

你有打字错误，所以没有添加库

<scripttype="text/javascript"src="//cdn.jsdelivr.net/jquery.slick/1.3.6/slick.min.js</script>
------^here                                   and missing quotes-------------------^
应该

<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.3.6/slick.min.js"</script>

您也没有关闭$(document).ready

在浏览器控制台中修复错误应该可以解决问题。然后检查库是否被添加到资源中。

顺便说一句，我想知道为什么你在css里面有一个<br> ?

相关文章：