<div class=“content mx-auto p-3 carousel”>

{% assign featured_posts = site.posts | where: "featured", true %}

{% for post in featured_posts %}
{% if forloop.first %}
<div class="carousel-slide active" style="background-image: url('{{ post.image | prepend: site.baseurl }}');">
  <div class="col-4 p-4 carousel-card">
    <h2 class="pb-4">
      <a href="{{ post.url | prepend: site.baseurl }}">{{ post.title | truncate: 35 }}</a>
    </h2>
    <div class="col-4 border-top-thick"></div>
    <h6 class="py-4 mb-4">{{ post.date | date: '%d %b %Y' }}</h6>
  </div>
</div>
{% else %}
<div class="carousel-slide" style="background-image: url('{{ post.image | prepend: site.baseurl }}');">
  <div class="col-4 p-4 carousel-card">
    <h2 class="pb-4">
      <a href="{{ post.url | prepend: site.baseurl }}">{{ post.title | truncate: 35 }}</a>
    </h2>
    <div class="col-4 border-top-thick"></div>
    <h6 class="py-4 mb-4">{{ post.date | date: '%d %b %Y' }}</h6>
  </div>
</div>
{% endif %}
{% endfor %}

{% if featured_posts.size > 1 %}
<div class="col-4 px-4 flex space-between carousel-navigation">
  <div class="col-3 carousel-btn btn-prev border-left-thick">
    <h5 class="ml-3">Previous</h5>
  </div>
  <div class="col-3 carousel-btn btn-next border-right-thick text-right">
    <h5 class="mr-3">Next</h5>
  </div>
</div>
{% endif %}

</div>

<script src=“{{ site.baseurl }}/assets/js/carousel.js”></script>