初始化問題時使用Slick.js

Question

我想初始化slick.js函數在我的網頁，我按照http://kenwheeler.github.io/slick/指示，並複製「中心模式」功能作爲我的Jquery功能。但是我沒有在幻燈片中看到任何箭頭/按鈕和導航文檔。

這裏是我的jsfiddle：

https://jsfiddle.net/woodmanhu/cL0yuaze/

這裏是代碼：

<div class="your-class"> 
    <div>your content</div> 
    <div>your content</div> 
    <div>your content</div> 
    </div> 

$(document).ready(function(){ 
    $('.your-class').slick({ 
    centerMode: true, 
    centerPadding: '60px', 
    slidesToShow: 3, 
    responsive: [ 
    { 
     breakpoint: 768, 
     settings: { 
     arrows: false, 
     centerMode: true, 
     centerPadding: '40px', 
     slidesToShow: 3 
     } 
    }, 
    { 
     breakpoint: 480, 
     settings: { 
     arrows: false, 
     centerMode: true, 
     centerPadding: '40px', 
     slidesToShow: 1 
     } 
    } 
    ] 
}); 
    }); 

CDN我用：

//ajax.googleapis.com/ajax/libs /jquery/1.12.0/jquery.min.js

個

//cdn.jsdelivr.net/jquery.slick/1.5.9/slick.min.js

//cdn.jsdelivr.net/jquery.slick/1.5.9/slick.css

//cdn.jsdelivr.net/jquery.slick/1.5.9/slick-theme.css

任何人都可以幫助我在我錯過的地方或者我做錯了嗎？

謝謝

Answer 1

你就近了。我通常通過小提琴用戶界面包含jquery，但是由於您正在導入它，它應該仍然有效（我認爲）。

其中一個問題是您已將其設置爲顯示3張幻燈片，但僅包含內容中的3張幻燈片（所以沒有別的可顯示的內容）。我還在容器上設置了最大寬度，以使可滾動區域更易於演示。 next/prev按鈕顯示效果不佳，但這與您使用的主題有關。

無論哪種方式，這裏是您的演示工作更新的小提琴。

編輯：我添加了一個藍色背景，所以你可以看到下一個/上一級按鈕 - 這是你必須在模板中改變的東西。如果要查看圖像下方的點，則需要將dots屬性設置爲true。

https://jsfiddle.net/cL0yuaze/5/

$(document).ready(function() { 
 
    $('.your-class').slick({ 
 
    dots: true, 
 
    centerMode: true, 
 
    centerPadding: '60px', 
 
    slidesToShow: 3, 
 
    responsive: [{ 
 
     breakpoint: 768, 
 
     settings: { 
 
     arrows: false, 
 
     centerMode: true, 
 
     centerPadding: '40px', 
 
     slidesToShow: 3 
 
     } 
 
    }, { 
 
     breakpoint: 480, 
 
     settings: { 
 
     arrows: false, 
 
     centerMode: true, 
 
     centerPadding: '40px', 
 
     slidesToShow: 1 
 
     } 
 
    }] 
 
    }); 
 
});

.container 
 
{ 
 
    width: 500px; 
 
    margin-left:auto; 
 
    margin-right:auto; 
 
} 
 

 
body 
 
{ 
 
    background: #3498db; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdn.jsdelivr.net/jquery.slick/1.5.9/slick.min.js"></script> 
 
<link href="https://cdn.jsdelivr.net/jquery.slick/1.5.9/slick-theme.css" rel="stylesheet" /> 
 
<link href="https://cdn.jsdelivr.net/jquery.slick/1.5.9/slick.css" rel="stylesheet" /> 
 

 
<div class='container'> 
 
    <div class="your-class"> 
 
    <div>your content1</div> 
 
    <div>your content2</div> 
 
    <div>your content3</div> 
 
    <div>your content4</div> 
 
    <div>your content5</div> 
 
    <div>your content6</div> 
 
    <div>your content7</div> 
 
    <div>your content8</div> 
 
    <div>your content9</div> 
 
    <div>your content10</div> 
 
    <div>your content11</div> 
 
    <div>your content12</div> 
 
    </div> 
 
</div>