title: Slick-carousel error unslick is not a function
body: <p>As you can see, there are 8 blocks 4 on top and 4 from below. </p>
  
  <p>I need to that the slider worked in mobile version.Like in  <a href="https://codepen.io/topicstarter/pen/GdexQW?editors=1010" rel="nofollow noreferrer"><strong>there</strong></a></p>
  
  <p>Also if you look at this link attentively you should see that this code don't work in onload.</p>
  
  <p>I'll take this code made some changes and it had to work but did.I'm getting a bunch of bugs in the console. </p>
  
  <p>Error: <strong>Cannot read property 'unslick' of undefined</strong></p>
  
  <p>I have tried to change from </p>
  
  <pre><code> $(".container-slick").unslick("unslick");
  </code></pre>
  
  <p>to</p>
  
  <pre><code>$(".container-slick").slick({
     settings:"unslick"
  });
  </code></pre>
  
  <p>But it didn't work.</p>
  
  <p>Please help.</p>
  
  <p>Here the my <a href="https://codepen.io/DuudeXX8/pen/PeLyGr" rel="nofollow noreferrer"><strong>codepen</strong></a> </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-js lang-js prettyprint-override"><code>$(window).on('load', function(){
      if($(window).width() &lt; 768){
       $('.container-slick').slick({
            centerMode: true,
            infinite: true,
            prevArrow: false,
            nextArrow: false,
            speed: 200,
            slidesToShow: 1
          });
      }
      else{
        $(".container-slick").slick("unslick");
      }
    });
  $(window).on('resize', function(){
      if($(window).width() &lt; 768){
       $('.container-slick').slick({
            centerMode: true,
            infinite: true,
            prevArrow: false,
            nextArrow: false,
            speed: 200,
            slidesToShow: 1
          });
      }
      else{
        $(".container-slick").unslick("unslick");
      }
    });
    </code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.projects_block {
      margin-bottom: 2%;
      display: flex;
      font-family: 'montserrat';
      flex-wrap: wrap;
  }
  .project_block {
      width: 23%;
      height:100px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick.min.js"&gt;&lt;/script&gt;
  &lt;div class="projects_block container-slick no-padding"&gt;
    &lt;div class="project_block slide no-padding"&gt;
      &lt;div class="project_name"&gt;Discover Milan's religious sites&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="project_block slide no-padding"&gt;
      &lt;div class="project_name"&gt;Saint Petersburg Philharmonic Orchestra&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="project_block slide no-padding"&gt;
      &lt;div class="project_name"&gt;Grand Hall Music &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="project_block slide no-padding"&gt;
      &lt;div class="project_name"&gt;Hand-made art &amp; design workshop&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="project_block slide no-padding"&gt;
      &lt;div class="project_name"&gt;Discover Milan's religious sites&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="project_block slide no-padding"&gt;
      &lt;div class="project_name"&gt;Saint Petersburg Philharmonic Orchestra&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="project_block slide no-padding"&gt;
      &lt;div class="project_name"&gt;Grand Hall Music &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="project_block slide no-padding"&gt;
      &lt;div class="project_name"&gt;Hand-made art &amp; design workshop&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
                          </code></pre>
  </div>
  </div>
  </p>