使用 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

你很亲密。我通常通过小提琴 UI 包含 jquery，但是由于您正在导入它，它应该仍然可以工作（我认为）。

另一个问题是您将其设置为显示 3 张幻灯片，但内容中只包含 3 张幻灯片（因此没有其他内容可显示）。我还在容器上设置了最大宽度，以使可滚动区域更易于演示。下一个/上一个按钮显示得不是很好，但这与您使用的主题有关。

不管怎样，这里有一个更新的小提琴，你的演示工作。

编辑：我添加了蓝色背景，以便您可以看到下一个/上一个按钮——这是您必须在模板中更改的内容。如果要查看图像下方的点，则需要将 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>