{layout name="common/layout" /}

<div class="recommend-index">
    <div class="recommend-top">

        <div id="carousel-focus-captions" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">
                {blog:blocklist id="block" name="indexfocus" row="5"}
                    <li data-target="#carousel-focus-captions" data-slide-to="{:$i-1}" class="{if $i==1}active{/if}"></li>
                {/blog:blocklist}
            </ol>
            <div class="carousel-inner">
                {blog:blocklist id="block" name="indexfocus" row="5"}
                    <div class="carousel-item {if $i==1}active{/if}">
                        <a href="{$block.url}">
                            <img class="d-block w-100" src="{$block.image|cdnurl}" alt="{$block.title|htmlentities}">
                        </a>
                    </div>
                {/blog:blocklist}
            </div>
            <a class="carousel-control-prev" href="#carousel-focus-captions" 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-focus-captions" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>


    </div>
    <div class="recommend-bottom">
        {blog:blocklist id="block" name="indexsmallfocus" row="4"}
        <div class="recommend-item">
            <a href="{$block.url}"><img src="{$block.image|cdnurl}" class="img-fluid" alt="{$block.title|htmlentities}"></a>
        </div>
        {/blog:blocklist}
    </div>

</div>

{include file="common/postlist"}