Question

我刚发现slick "the last carousel you will ever need"

我尝试用它做一些测试没有任何工作：/

我做了一些代码：

<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

感谢

Answer 1

您有拼写错误，因此未添加库

<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

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

BTW我想知道为什么你在CSS中有<br>？

Answer 2

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

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

不知道浮油中是否有任何错误，或者我们是否错误地初始化错误：

.videocontainer {
 background-color: white;
 margin: 5px;
 text-align: center;
}
.sliderlastvid{
 width: 300px;
 margin: 0px auto;
}

http://jsfiddle.net/4Dn3b/2/

更新：当我在滑块中向后移动时，一些视频容器会显示在下方，只是在其后固定。如果您遇到任何问题，请查看光滑的主页：http://kenwheeler.github.io/slick/

光滑滑块不工作高度

2 个答案: