javascript - Slick 轮播合并的问题

Question

我想在我的网站上使用 Slick 轮播，但我无法制作 kenwheeler.github.io/slick/ 中的第一个示例(单个项目)上类。也许我忘记了一些东西，但我找不到什么。

这是我的代码(也在 jsfiddle 上):

HTML

<div class="slider single-item slick-initialized slick-slider">
  <div class="slick-list draggable" tabindex="0">
    <div class="slick-track" style="opacity: 1; width: 4480px; transform: translate3d(-560px, 0px, 0px);">
      <div class="slick-slide slick-cloned" index="-1" style="width: 560px;"><h3>6</h3></div>
      <div class="slick-slide slick-active" index="0" style="width: 560px;"><h3>1</h3></div>
      <div class="slick-slide" index="1" style="width: 560px;"><h3>2</h3></div>
      <div class="slick-slide" index="2" style="width: 560px;"><h3>3</h3></div>
      <div class="slick-slide" index="3" style="width: 560px;"><h3>4</h3></div>
      <div class="slick-slide" index="4" style="width: 560px;"><h3>5</h3></div>
      <div class="slick-slide" index="5" style="width: 560px;"><h3>6</h3></div>
      <div class="slick-slide slick-cloned" index="6" style="width: 560px;"><h3>1</h3></div>
    </div>
  </div>

  <button type="button" data-role="none" class="slick-prev" style="display: block;">Previous</button>
  <button type="button" data-role="none" class="slick-next" style="display: block;">Next</button>
  <ul class="slick-dots" style="display: block;">
    <li class="slick-active"><button type="button" data-role="none">1</button></li>
    <li><button type="button" data-role="none">2</button></li>
    <li><button type="button" data-role="none">3</button></li>
    <li><button type="button" data-role="none">4</button></li>
    <li><button type="button" data-role="none">5</button></li>
    <li><button type="button" data-role="none">6</button></li>
  </ul>
</div>

jQuery

$(document).ready(function() {
  $('.single-item').slick({
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1
  });
});

谢谢。

编辑:当我使用开发人员工具检查按钮上的事件监听器时，我什么也没有，这与光滑文档上的相同轮播相反( http://kenwheeler.github.io/slick/#demos )。

在 Slick 网站上，下一个箭头按钮上有一个单击事件监听器，如您在屏幕上看到的:

我不知道为什么本地不存在这个事件监听器(顺便说一句，jquery 已正确加载)。

Answer 1

你的jsfiddle有很多错误

• 您的 HTML 是复制粘贴内容，已被库标记
• 您需要在 slick 之前加载 jQuery
• 您包含了一个不存在的 1.12 jquery(无关紧要，但值得指出)

HTML:

<section id="features" class="blue">
    <div class="content">
        <div class="single-item">
            <div><h3>1</h3></div>
            <div><h3>2</h3></div>
            <div><h3>3</h3></div>
            <div><h3>4</h3></div>
            <div><h3>5</h3></div>
            <div><h3>6</h3></div>
        </div>
    </div>
</section>

JS:

$(document).ready(function() {
    $('.single-item').slick({
        dots: true,
        infinite: true,
        speed: 500,
        slidesToShow: 1,
        slidesToScroll: 1
    });
});

这是一个jsfiddle .