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张幻灯片（所以没有其他内容可以显示）。我还在容器上设置了最大宽度，以使可滚动区域更容易演示。 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时初始化问题

1 个答案: