關於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網站上，您可以在屏幕上看到的下一個箭頭按鈕上有一個click事件監聽器：

我不知道為什么此事件偵聽器在本地不存在（順便說一句，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 。