轮播没有水平显示

Question

我尝试编码的旋转木马没有水平内联显示；而是在整个网页上保持垂直。

/*  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/slick-carousel@1.8.1/slick/slick.min.js">
    $('.post-wrapper').slick({
      slidesToShow: 3,
      slidesToScroll: 1,
      autoplay: true,
      autoplaySpeed: 2000,
    });
  });
</script>

Answer 1

第一个问题是因为您不能将 JS 代码放入具有 src 属性的 <script> 标签中。您需要将它们分开。

第二个问题是您需要在页面中添加对 jQuery.js 的引用，因为 Slick 依赖于它。

有了这些地址，代码就可以工作了：

.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/slick-carousel@1.8.1/slick/slick.min.js"></script>
<script>
  $('.post-wrapper').slick({
    slidesToShow: 3,
    slidesToScroll: 1,
    autoplay: true,
    autoplaySpeed: 2000
  });
</script>

轮播没有水平显示

Carousel isn't displaying horizontally

javascript

css

jquery

carousel