title: I can't use slick slider properly, it's not showing any kind of result
body: <p>Here is my code, can anyone please help me find the error?</p>
  
  <p>What I am trying to do here is to make a carousel where only 1 slide is shown and the other two are shown in the background. But the thing is that the code is not doing anything and just sitting there ideally.</p>
  
  <p>I have already added all the updated files that are needed to run the slick slider program correctly.</p>
  
  <p>Sorry for all the fuss, I am trying to get my head around this thing, and this is the first time I am using it in my project. Maybe I missed something, but I have already checked a hundred times.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;meta charset="UTF-8" /&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="ie=edge" /&gt;
      &lt;title&gt;Home&lt;/title&gt;
      &lt;link rel="stylesheet" type="text/css" href="./css/style.css" /&gt;
      &lt;link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css" /&gt;
      &lt;link rel="stylesheet" type="text/css" href="./css/all.min.css" /&gt;
      &lt;link rel="stylesheet" type="text/css" href="./css/slick.css" /&gt;
      &lt;link rel="stylesheet" type="text/css" href="./css/slick-theme.css" /&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
      &lt;div class="container"&gt;
        &lt;div class="slider slider-port row"&gt;
          &lt;div&gt;
            &lt;div class="card" style="width: 18rem;"&gt;
              &lt;img
                src="./images/brickwork.jpg"
                class="card-img-top"
                alt="1. Bangalore Stone Works"
              /&gt;
              &lt;div class="card-body"&gt;
                &lt;h5 class="card-title"&gt;Bangalore Stone Works&lt;/h5&gt;
                &lt;p class="card-text"&gt;
                  Some quick example text to build on the card title and make up
                  the bulk of the card's content.
                &lt;/p&gt;
                &lt;a href="#" class="btn btn-primary"&gt;Read More&lt;/a&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div&gt;
            &lt;div class="card" style="width: 18rem;"&gt;
              &lt;img
                src="./images/concrete.jpg"
                class="card-img-top"
                alt="2. Porbandar Stone Works"
              /&gt;
              &lt;div class="card-body"&gt;
                &lt;h5 class="card-title"&gt;Porbandar Stone Works&lt;/h5&gt;
                &lt;p class="card-text"&gt;
                  Some quick example text to build on the card title and make up
                  the bulk of the card's content.
                &lt;/p&gt;
                &lt;a href="#" class="btn btn-primary"&gt;Read More&lt;/a&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div&gt;
            &lt;div class="card" style="width: 18rem;"&gt;
              &lt;img
                src="./images/brickwork.jpg"
                class="card-img-top"
                alt="3. Rajawadi Gate"
              /&gt;
              &lt;div class="card-body"&gt;
                &lt;h5 class="card-title"&gt;Rajawadi Gate&lt;/h5&gt;
                &lt;p class="card-text"&gt;
                  Some quick example text to build on the card title and make up
                  the bulk of the card's content.
                &lt;/p&gt;
                &lt;a href="#" class="btn btn-primary"&gt;Read More&lt;/a&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div&gt;
            &lt;div class="card" style="width: 18rem;"&gt;
              &lt;img
                src="./images/concrete.jpg"
                class="card-img-top"
                alt="4. Wooden Works"
              /&gt;
              &lt;div class="card-body"&gt;
                &lt;h5 class="card-title"&gt;Wooden Works&lt;/h5&gt;
                &lt;p class="card-text"&gt;
                  Some quick example text to build on the card title and make up
                  the bulk of the card's content.
                &lt;/p&gt;
                &lt;a href="#" class="btn btn-primary"&gt;Read More&lt;/a&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div&gt;
            &lt;div class="card" style="width: 18rem;"&gt;
              &lt;img
                src="./images/brickwork.jpg"
                class="card-img-top"
                alt="5. Compund Wall"
              /&gt;
              &lt;div class="card-body"&gt;
                &lt;h5 class="card-title"&gt;Compound Wall&lt;/h5&gt;
                &lt;p class="card-text"&gt;
                  Some quick example text to build on the card title and make up
                  the bulk of the card's content.
                &lt;/p&gt;
                &lt;a href="#" class="btn btn-primary"&gt;Read More&lt;/a&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div&gt;
            &lt;div class="card" style="width: 18rem;"&gt;
              &lt;img
                src="./images/concrete.jpg"
                class="card-img-top"
                alt="6. Flooring"
              /&gt;
              &lt;div class="card-body"&gt;
                &lt;h5 class="card-title"&gt;Flooring&lt;/h5&gt;
                &lt;p class="card-text"&gt;
                  Some quick example text to build on the card title and make up
                  the bulk of the card's content.
                &lt;/p&gt;
                &lt;a href="#" class="btn btn-primary"&gt;Read More&lt;/a&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- TESTIMONIALS --&gt;
      &lt;section id="testimonial-section" class="p-4 bg-dark text-white"&gt;
        &lt;div class="container"&gt;
          &lt;h2 class="text-center"&gt;Testimonials&lt;/h2&gt;
          &lt;div class="row"&gt;
            &lt;div class="col"&gt;
              &lt;div class="test-slider text-center"&gt;
                &lt;div&gt;
                  &lt;blockquote class="blockquote"&gt;
                    &lt;p class="mb-0"&gt;
                      Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                      Illo, sunt!
                    &lt;/p&gt;
                    &lt;footer class="blockquote-footer"&gt;
                      John Doe From &lt;cite title="Company 1"&gt;Company 1&lt;/cite&gt;
                    &lt;/footer&gt;
                  &lt;/blockquote&gt;
                &lt;/div&gt;
                &lt;div&gt;
                  &lt;blockquote class="blockquote"&gt;
                    &lt;p class="mb-0"&gt;
                      Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                      Illo, sunt!
                    &lt;/p&gt;
                    &lt;footer class="blockquote-footer"&gt;
                      Steve Smith From &lt;cite title="Company 2"&gt;Company 2&lt;/cite&gt;
                    &lt;/footer&gt;
                  &lt;/blockquote&gt;
                &lt;/div&gt;
                &lt;div&gt;
                  &lt;blockquote class="blockquote"&gt;
                    &lt;p class="mb-0"&gt;
                      Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                      Illo, sunt!
                    &lt;/p&gt;
                    &lt;footer class="blockquote-footer"&gt;
                      Megan Williams From &lt;cite title="Company 3"&gt;Company 3&lt;/cite&gt;
                    &lt;/footer&gt;
                  &lt;/blockquote&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/section&gt;
  
      &lt;footer class="p-5"&gt;
  
      &lt;/footer&gt;
  
      &lt;script type="text/javascript" src="./js/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="./js/popper.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="./js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="./js/all.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="./js/slick.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="./js/main.js"&gt;&lt;/script&gt;
      &lt;script&gt;
        $(document).ready(function() {
          $(".dropdown").hover(
            function() {
              $(".dropdown-menu", this)
                .stop(true, true)
                .slideDown("fast");
              $(this).toggleClass("open");
            },
            function() {
              $(".dropdown-menu", this)
                .stop(true, true)
                .slideUp("fast");
              $(this).toggleClass("open");
            }
          );
        });
      &lt;/script&gt;
      &lt;script&gt;
        $(document).ready(function() {
          $(".test-slider").slick({
            dots: true,
            infinite: true,
            speed: 300,
            slidesToShow: 1,
            adaptiveHeight: true
          });
        });
      &lt;/script&gt;
      &lt;script&gt;
        $(document).ready(function() {
          $(".slider-port").slick({
            centerMode: true,
            centerPadding: "60px",
            slidesToShow: 3,
            responsive: [
              {
                breakpoint: 768,
                settings: {
                  arrows: false,
                  centerMode: true,
                  centerPadding: "40px",
                  slidesToShow: 3
                }
              },
              {
                breakpoint: 480,
                settings: {
                  arrows: false,
                  centerMode: true,
                  centerPadding: "40px",
                  slidesToShow: 1
                }
              }
            ]
          });
        });
      &lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>