使用slick实现的Carousel轮播图无法横向排列仅垂直显示如何解决？

根因分析 #

• Slick轮播组件依赖jQuery运行，当前代码未引入jQuery，组件初始化失败
• Slick资源引入和初始化代码写在了同一个带src属性的script标签中，该标签内的自定义代码不会被浏览器执行
• 初始化代码末尾多了一个多余的});闭合符号，存在语法错误
• 未引入Slick配套的CSS样式文件，即便JS执行成功也无法实现横向排列效果

修复代码 #

CSS部分 #

/* 提前将slick相关资源下载到本地项目后引入对应样式，以下为示例路径
@import url("./slick/slick.css");
@import url("./slick/slick-theme.css");
*/

/*  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;
  background: blue;
}

HTML+JS部分 #

<!-- 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>
</div>

<!-- 先引入本地jQuery资源 -->
<script src="./jquery.min.js"></script>
<!-- 再引入本地slick资源 -->
<script type="text/javascript" src="./slick/slick.min.js"></script>
<!-- 单独编写初始化逻辑 -->
<script>
    $('.post-wrapper').slick({
      slidesToShow: 3,
      slidesToScroll: 1,
      autoplay: true,
      autoplaySpeed: 2000,
    });
</script>

内容的提问来源于stack exchange，提问作者Jack