光滑的滑塊不起作用的高度

Question

我只是發現了光滑的“您將永遠需要的最后一個轉盤”

而且我嘗試用它進行一些測試，什么都沒有工作：/

我做了一點代碼：

<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%
}

假設是給我一個簡單的滑塊，但給我2行視頻中的一個很大的滑塊。

的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

在瀏覽器控制台中修復錯誤應該可以解決問題。 然后檢查是否在資源中添加了庫。

順便說一句，我想知道為什么您在CSS中有<br> ？

Answer 2

我已經修復了您的jsfiddle，我也對html結構進行了一些更改。

主要問題似乎是，光滑的插件不喜歡.videocontainer css類中的邊距和寬度。

不知道slick是否存在任何錯誤，或者我們沒有正確初始化它：

.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/