最新的Jekyll帖子摘录轮播

Question

我正在构建一个博客展示着陆页。我希望页面只是一个轮播。我希望轮播中最多5张幻灯片。每张幻灯片都将包含最近5个帖子中的1个的封面图片，标题，日期和标签（这是展示卡），以及LAST，SEE ALL，下一页，并了解更多信息。

我简要地看了一下分页，但是我不确定这是我应该走的路线。

showcase.html

---
layout: default
---

<div class="showcase-bg">
    {%- if site.posts.size > 0 -%}
    {%- for post in site.posts -%}
    {%- include showcase-card.html -%}
    {%- endfor -%}
    {%- endif -%}
    {% include nav-bottom.html %} <!-- website nav, not showcase nav -->
</div>

showcase-card.html

<div class="sc-right-extend">
</div>
<div class="page-wrapper">
  <div class="sc-card-base">
    <div class="sc-left">
      <img src= {{ post.cover-img }} class="sc-img">
      <a href="#" class="sc-categories"">
        {{ post.categories }}
      </a>
    </div>
      <div class="sc-post-content">
        <div class="sc-post-type">
          <p class="sc-post-date"><img src= {{ "/assets/img/calendar-icon.png" }} alt="calendar icon">
            {{ post.date | date: "%Y.%m.%d" }}
          </p>
          <h1 class="sc-post-title">
            {{ post.title }}
          </h1>
          <p class="sc-post-excerpt">
            {{ post.excerpt }}
          </p>
        </div> <!-- End sc-post-type -->
        {% include sc-card-nav.html %}
      </div> <!-- End sc-post-content -->
    </div>
</div>

sc-card-nav

<div class="sc-card-footer">
  <a href="{{ post.previous.url }}" class="sc-card-button">
    < last
  </a>
  <a href={{ "/" }} class="sc-card-button">
    see all
  </a>
  <a href="{{ post.next.url }}" class="sc-card-button">
    next >
  </a>
  <a href="{{ post.url }}" class="sc-card-button">
    read more >>
  </a>
</div> <!-- End card-footer -->

我已经能够加载最后五个职位，但是那会彻底破坏版面，这就是我现在的位置。