Slick slider not working, why?

Question

css

Hello. I did everything as in the documentation, but for some reason it does not work .. And it seems to be connected, but crookedly. One of the elements pops up on the left of the page, and it can be scrolled, but it does not scroll, it only moves from the beginning to the end of the page .. Then it disappears altogether .. What is wrong with this slider?

$('.modal1').click(function() {
    	$('#modalwindow').arcticmodal()
    });

$('.single-item').slick();

<link rel="stylesheet" href="css/simple.css">
  <link rel="stylesheet" href="css/jquery.arcticmodal-0.3.css">
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" href="css/slick-theme.css">
  <link rel="stylesheet" href="css/slick.css">
  <link rel="stylesheet" href="css/style.css">
<section id="fourth">
    <div class="container">
      <div class="row">
        <div class="col-lg-12 text-center">
          <h2 class="fourth_title">Beautiful Interface</h2>
          <p class="fourth_title_down">Landing Screen</p>
        </div>
        <div class="row">
          <div class="col-lg-12 text-center">
            <div class="single-item">
              <div><img src="img/1.png" alt=""></div>
              <div><img src="img/2.png" alt=""></div>
              <div><img src="img/3.png" alt=""></div>
              <div><img src="img/4.png" alt=""></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <script src="js/jquery.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script src="js/jquery.arcticmodal-0.3.min.js"></script>
  <script src="js/slick.min.js"></script>
  <script src="js/slick.js"></script>
  <script src="js/main.js"></script>

Answer 1

The slider needs to be initialized after it becomes visible (as far as I understand, you have a modal window).
Hidden elements do not have a width and the slider cannot correctly calculate the dimensions of the slides.

Answer 2

1 thing you should always do is look at the errors in the console, but let's say they are not there, then:

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

Why twice?

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

Why is the theme before the main styles?
Make sure that it $('.single-item')finds, for example like this: it
will output 1 to the console if everything is ok.

Answer 3

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

there is clearly one extra line here,
and yes, call the slick after the modal, and not just after the modal, but on the event the window was built . google it a little, everything is there... slick
doesn't work for hidden blocks , it will be like that with all sliders, alas and ah))) or write your own slider, theoretically you can do it on hidden ones, but it will look clumsy...