Why can't Slick Slider connect?

Question

JavaScript

Hi

I'm not using it for the first time, but now something is in a stupor
And so, I added to the head:

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

Scripts before the closing tag:

<script src="/js/slick.min.js"></script>

<script>
  $(document).ready(function () {
    $('.slick-slider').slick();
  });

</script>

And the code itself:

<div class="slick-slider">
  {foreach from=$output.items item=item name=key}
    <div class="slick-slide">
      <img src="{$item.img}" alt="">
      <div class="text">
        <span>{$item.title}</span>
        <span>{$item.content}</span>
      </div>
    </div>
  {/foreach}
</div>

I see it in the code in the inspector, the styles are connected, the problem is most likely in js, but this is a guess
. So, what could be the problem?
Thanks

Answer 1

Issue resolved:
Scripts were not in tags {literal}and jquery blocked loading for some reason

Answer 2

well, xs is this a problem or not, then <div class="slick-slide">remove the slick-slide class in this diva. he puts it down himself. leave the divs without classes. Tobish do not delete this div.
but just remove the ps class and do the initialization, at least this

$('.slick-slider').slick({
  dots: true,
  infinite: true,
  speed: 300,
  slidesToShow: 1
});

so that you can understand whether js is connected or not