How to impliment filter in posts in ghost blog

[nt2]

I am working on a blog. On the homepage, it has a bootstrap slider at the top followed by posts afters it.

So, first 3 latest posts will appear in the slider and from 4th post onwards, they will appear on the rest of the markup.

I think I need to impliment some kind of filter which would do the deed.

Below is my hbs code.

<div class="col-md-12 hidden-xs">
    <div id="myCarousel" class="carousel slide">
        <!-- Carousel indicators -->
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>
        <!-- Carousel items -->
        <div class="carousel-inner ">
            <div class="item active ">
                {{#foreach posts}}
                <article class="{{post_class}} col-md-12">
                    <div class="post-inner">
                        <header class="post-header text-left">
                            <h2 class="post-title "><a href="{{url}}">{{{title}}}</a></h2>
                        </header>
                        <section class="post-excerpt">
                            <p>{{excerpt words="20"}} <a class="read-more" href="{{url}}">&raquo;</a></p>
                            {{#if image}}<img class="post-image" src="{{image}}" alt="Post image" />{{/if}}
                        </section>
                        <div class="post-meta">
                            {{#if author.image}}<img class="author-thumb" src="{{author.image}}" alt="Author image" nopin="nopin" />{{/if}} {{author}} {{tags prefix=" on "}}
                            <time class="post-date" datetime="{{date format='YYYY-MM-DD'}}">{{date format="DD MMMM YYYY"}}</time>
                        </div>
                    </div>
                </article>
                {{/foreach}}
            </div>
        </div>
        <!-- Carousel nav -->
        <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
        <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
    </div>
    <div class="bottom-line"></div>
</div>
</div>
<div class="clearfix"></div>
<div class="row">
    <div class="col-md-4 ">
        {{#foreach posts}}
        <article class="{{post_class}} col-md-12">
            <div class="post-inner">
                <header class="post-header text-left">
                    <h2 class="post-title "><a href="{{url}}">{{{title}}}</a></h2>
                </header>
                <section class="post-excerpt">
                    <p>{{excerpt words="20"}} <a class="read-more" href="{{url}}">&raquo;</a></p>
                    {{#if image}}<img class="post-image" src="{{image}}" alt="Post image" />{{/if}}
                </section>
                <div class="post-meta">
                    {{#if author.image}}<img class="author-thumb" src="{{author.image}}" alt="Author image" nopin="nopin" />{{/if}} {{author}} {{tags prefix=" on "}}
                    <time class="post-date" datetime="{{date format='YYYY-MM-DD'}}">{{date format="DD MMMM YYYY"}}</time>
                </div>
            </div>
        </article>
        {{/foreach}}
    </div>
</div>

I hope I made my question clear.

[nt2]

anyone ??