<hr> <p class=“font-weight-bold dark-grey-text text-center spacing”>

FEATURED<strong> POSTS</strong>

</p> <hr>

{% assign posts = site.posts | where: “featured”, “true” %} {% if posts %} <!– Featured posts –> <section class=“mb-5”>

<!-- Grid row -->
<div class="row mt-4">
    <!-- Grid column -->
    <div class="col-md-12">

        <!-- Carousel Wrapper -->
        <div id="carousel-example-4" class="carousel slide carousel-fade z-depth-1-half" data-ride="carousel">
            <!-- Indicators -->
            <ol class="carousel-indicators">
                {% assign counter = 0%}
                {% for post in posts reversed limit:5 %}
                {% assign counter = counter | plus:1%}
                <li data-target="#carousel-example-4" data-slide-to="{{ counter -1}}" {% if counter==1%} class="active">{%endif %}</li>
                {% endfor %}
            </ol>
            <!-- Indicators -->

            <!-- Slides -->
            <div class="carousel-inner" role="listbox">
                {% assign counter = 0%}
                {% for post in posts reversed limit:5 %}
                {% assign counter = counter | plus:1 %}

                <!-- First slide -->
                <div class="carousel-item {% if counter==1 %} active {%endif%}">
                    <!-- Mask color -->
                    <div class="view">
                        <img src="{{post.image}}" class="img-fluid" alt="">
                        <a href="#!">
                            <div class="mask flex-center rgba-black-light"></div>
                        </a>
                    </div>
                    <!-- Caption -->
                    <div class="carousel-caption">
                        <div class="animated fadeInDown">
                            <h4 class="h4-responsive">
                                <a href="{{ post.url }}" class="white-text font-weight-bold">{{post.title | truncatewords: 3, '...' | capitalize }}</a>
                            </h4>
                        </div>
                    </div>
                    <!-- Caption -->
                </div>
                <!-- First slide -->
                {% endfor %}
            </div>
            <!-- Slides -->

            <!-- Controls -->
            <a class="carousel-control-prev" href="#carousel-example-4" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#carousel-example-4" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
            <!-- Controls -->
        </div>
        <!-- Carousel Wrapper -->

    </div>
    <!-- Grid column -->
</div>
<!-- Grid row -->

</section> {% endif %} <!– Featured posts –>