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

            <div class="uk-grid-large uk-child-width-1-1 uk-child-width-1-2@s" uk-grid>
                <div>

                    <h2>Default</h2>

                    <div class="uk-inline">
                        <canvas width="1200" height="600" class="test-img"></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 class="uk-margin">
                        <a chref="#" uk-slidenav-previous></a>
                        <a href="#" uk-slidenav-next></a>
                    </div>

                </div>
                <div>

                    <h2>Large</h2>

                    <div class="uk-inline">
                        <canvas width="1200" height="600" class="test-img"></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 class="uk-margin">
                        <a class="uk-slidenav-large" href="#" uk-slidenav-previous></a>
                        <a class="uk-slidenav-large" href="#" uk-slidenav-next></a>
                    </div>

                </div>
            </div>

        </div>
    </div>
</div>