使用 Slick.js 时的初始化问题

Question

我正在尝试在我的网页中初始化 slick.js 函数，我按照 http://kenwheeler.github.io/slick/ 上的说明将 "center mode" 函数复制为我的 Jquery 函数。但是我的幻灯片放映中没有生成任何 arrows/buttons 和导航文档。

这是我的 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

你很接近。我通常通过 fiddle UI 包含 jquery，但既然你导入了它，它应该仍然有效（我认为）。

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

无论如何，这里是更新后的 fiddle 演示版。

编辑：我添加了蓝色背景，这样您就可以看到 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>

使用 Slick.js 时的初始化问题

Initializing issue when using Slick.js

jquery

html

slick.js