<div class="uk-section uk-height-viewport uk-flex uk-flex-middle">
    <div class="uk-container">

        <div class="uk-grid-large uk-child-width-1-1 uk-child-width-1-2@s" uk-grid>
            <div>
                <h2 class="uk-h5 uk-heading-divider uk-margin-large-bottom">Default</h2>
                <div class="uk-panel uk-margin-large-bottom">
                    <a class="uk-position-small uk-position-center-left" href="#" uk-slidenav="previous"></a>
                    <a class="uk-position-small uk-position-center-right" href="#" uk-slidenav="next"></a>
                </div>
                <div class="uk-inline">
                    <canvas width="1200" height="600" class="uk-background-muted"></canvas>
                    <a class="uk-position-small uk-position-center-left" href="#" uk-slidenav="previous"></a>
                    <a class="uk-position-small uk-position-center-right" href="#" uk-slidenav="next"></a>
                </div>
            </div>
            <div>
                <h2 class="uk-h5 uk-heading-divider uk-margin-large-bottom">Large</h2>
                <div class="uk-panel uk-margin-large-bottom">
                    <a class="uk-slidenav-large uk-position-small uk-position-center-left" href="#" uk-slidenav="previous"></a>
                    <a class="uk-slidenav-large uk-position-small uk-position-center-right" href="#" uk-slidenav="next"></a>
                </div>
                <div class="uk-inline">
                    <canvas width="1200" height="600" class="uk-background-muted"></canvas>
                    <a class="uk-slidenav-large uk-position-small uk-position-center-left" href="#" uk-slidenav="previous"></a>
                    <a class="uk-slidenav-large uk-position-small uk-position-center-right" href="#" uk-slidenav="next"></a>
                </div>
            </div>
        </div>

    </div>
</div>
