title: Slick carousel doesn't work
body: <p>I'm trying to use slick carousel to slide the year of a calendar but I can't make it work. </p>
  
  <p>Here's what I want to make slide:</p>
  
  <p><a href="https://i.stack.imgur.com/nG6M4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nG6M4.png" alt="enter image description here"></a></p>
  
  <p>And this is my code:</p>
  
  <pre><code>document.getElementById("calendar").getElementsByTagName("caption")[0].innerHTML="&lt;div&gt;"+year+"&lt;/div&gt;&lt;div class='slick'&gt;"+meses[month-1]+"&lt;/div&gt;&lt;div class='slick'&gt;&lt;a style='color: #cccccc;' onclick='mostrarCalendario("+prevYear+","+prevMonth+")'&gt;&amp;lt;&lt;/a&gt;&lt;/div&gt;&lt;div class='slick'&gt;&lt;a style='color: #cccccc;' onclick='mostrarCalendario("+nextYear+","+nextMonth+")'&gt;&amp;gt;&lt;/a&gt;&lt;/div&gt;&lt;div class='slick'&gt;"+meses[month-3]+"&lt;/div&gt;&lt;div class='slick'&gt;"+meses[month+1]+"&lt;/div&gt;&lt;div class='slick'&gt;"+meses[month-2]+"&lt;/div&gt;&lt;div class='slick'&gt;"+meses[month]+"&lt;/div&gt;";
  </code></pre>
  
  <p>And when I use this part on my code, this don't work...
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('.slick').slick({
    centerMode: true,
    centerPadding: '60px',
    slidesToShow: 5,
    responsive: [
  {
    breakpoint: 768,
    settings: {
      arrows: false,
      centerMode: true,
      centerPadding: '40px',
      slidesToShow: 3
    }
  },
  {
    breakpoint: 480,
    settings: {
      arrows: false,
      centerMode: true,
      centerPadding: '40px',
      slidesToShow: 1
    }
  }
    ]
  });</code></pre>
  </div>
  </div>
  </p>
  
  <p>I wanted that when I click on <code>&lt;</code> or <code>&gt;</code> make the month to slide, but I can't.</p>
  
  <p>Thank u very much.</p>
  
  <p>Here I have the PHP code where is the library:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="es"&gt;
  &lt;head&gt;
   
   
      &lt;script src="js/semanal.js"&gt;&lt;/script&gt;
   &lt;script src="slick/slick.min.js"&gt;&lt;/script&gt;
   &lt;link rel="stylesheet" href="slick/slick.css"&gt;
   &lt;meta charset="utf-8"&gt;
  &lt;/head&gt;
  &lt;body&gt;
   &lt;center&gt;
  &lt;table id="calendar"&gt;
  &lt;p&gt;
   &lt;caption&gt;&lt;/caption&gt;
   &lt;thead&gt;
   
    &lt;tr&gt;
     &lt;th&gt;LUNES&lt;/th&gt;&lt;th&gt;MARTES&lt;/th&gt;&lt;th&gt;MIERCOLES&lt;/th&gt;&lt;th&gt;JUEVES&lt;/th&gt;&lt;th&gt;VIERNES&lt;/th&gt;&lt;th&gt;SABADO&lt;/th&gt;&lt;th&gt;DOMINGO&lt;/th&gt;
    &lt;/tr&gt;
   &lt;/thead&gt;
   &lt;tbody&gt;
   &lt;script&gt;mostrarCalendario(actual.getFullYear(),actual.getMonth()+1);&lt;/script&gt;
   
   &lt;/tbody&gt;
  &lt;/table&gt;
   &lt;/center&gt;
  &lt;/body&gt;
  &lt;script src="js/semanal.js"&gt;&lt;/script&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>