Проблемы с включением карусели

Question

Я хочу использовать карандаш на моем сайте, но я не могу сделать первый пример (один элемент) с 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 был копировать-вставить, уже размечен библиотекой
• Вам необходимо загрузить 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.