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网站上，下一个箭头按钮上有一个点击事件监听器，您可以在屏幕上看到： event listeners

我不知道为什么这个事件监听器不存在于本地（顺便说明jquery正确加载）。

Answer 1

你的jsfiddle有很多错误

您的HTML是已经由库标记的复制粘贴
你需要在光滑之前加载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。

Slick轮播合并的问题

1 个答案: