I do not understand why the slick plugin is not connected. What's my mistake?

Question

HTML

Good evening. Unable to connect slick plugin. I connect in head

<link   rel="stylesheet" href="slick/slick-theme.css">
<link   rel="stylesheet" href="slick/slick.css">

The html code itself

<div class="direction-blocks">
  <div class="directions-block" style="background-image: url(img/directions/1.png);">
    <h3>Девелоперские проекты</h3>
  </div>
  <div class="directions-block" style="background-image: url(img/directions/2.png);">
    <h3>Продажа недвижимости</h3>
  </div>
  <div class="directions-block" style="background-image: url(img/directions/3.png);">
    <h3>Строительство</h3>
  </div>
  <div class="directions-block" style="background-image: url(img/directions/4.png);">
    <h3>Инвестиционные программы</h3>
  </div>
  <div class="directions-block" style="background-image: url(img/directions/5.jpg);">
    <h3>Финансовые инструменты</h3>
  </div>
  </div>

Before the closing body tag I include

<script src="slick/slick.js"></script> 
<script>
        $('.direction-blocks').slick({
        arrows: false,
  dots: true,
  slidesToShow: 4,
  slidesToScroll: 1
  });
  </script>

Answer 1

You need to initialize when the DOM has loaded.

$(document).ready(function(){
      $('.your-class').slick({
        setting-name: setting-value
      });
    });