Carousel isn’t displaying horizontally

The carousel I’m trying to code isn’t displaying inline horizontally; rather it’s remaining vertically down the whole webpage.

/*  Post Slider */

.post-slider {
  border: 1px solid black;
}

.post-slider .post-wrapper {
  width: 84%;
  height: 200px;
  margin: 0px auto;
  border: 1px solid black;
}

.post-slider .post-wrapper .post {
  height: 200px;
  width: 300px;
  display: inline-block;
  background: blue;
}
<!-- Carousel -->
<div class="page-wrapper">
  <!-- Carousel-Wrapper -->
  <div class="post-slider">
    <h1 class="slider-title">Trending Posts</h1>
    <div class="post-wrapper">
      <div class="post">1</div>
      <div class="post">2</div>
      <div class="post">3</div>
      <div class="post">4</div>
      <div class="post">5</div>
    </div>
  </div>

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js">
    $('.post-wrapper').slick({
      slidesToShow: 3,
      slidesToScroll: 1,
      autoplay: true,
      autoplaySpeed: 2000,
    });
  });
</script>

Answer

The first problem is because you cannot put JS code in to a <script> tag with a src attribute. You’ll need to separate them out.

The second issue is that you need to add a reference to jQuery.js in the page as Slick depends on it.

With those addressed, the code works:

.post-slider {
  border: 1px solid black;
}

.post-slider .post-wrapper {
  width: 84%;
  height: 200px;
  margin: 0px auto;
  border: 1px solid black;
}

.post-slider .post-wrapper .post {
  height: 200px;
  width: 300px;
  display: inline-block;
  background: blue;
}
<div class="page-wrapper">
  <div class="post-slider">
    <h1 class="slider-title">Trending Posts</h1>
    <div class="post-wrapper">
      <div class="post">1</div>
      <div class="post">2</div>
      <div class="post">3</div>
      <div class="post">4</div>
      <div class="post">5</div>
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>
<script>
  $('.post-wrapper').slick({
    slidesToShow: 3,
    slidesToScroll: 1,
    autoplay: true,
    autoplaySpeed: 2000
  });
</script>