<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 uk-container-small">

            <div uk-slider>

                <div class="uk-position-relative uk-visible-toggle">

                    <div class="uk-slider-container uk-slider-container-offset" tabindex="-1">

                        <ul class="uk-slider-items uk-child-width-1-3@s uk-grid">
                            <li>
                                <div class="uk-card uk-card-default uk-card-hover uk-card-body">
                                    <h3 class="uk-card-title">Default</h3>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
                                </div>
                            </li>
                            <li>
                                <div class="uk-card uk-card-primary uk-card-hover uk-card-body">
                                    <h3 class="uk-card-title">Primary</h3>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
                                </div>
                            </li>
                            <li>
                                <div class="uk-card uk-card-secondary uk-card-hover uk-card-body">
                                    <h3 class="uk-card-title">Secondary</h3>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
                                </div>
                            </li>
                            <li>
                                <div class="uk-card uk-card-default uk-card-hover uk-card-body">
                                    <h3 class="uk-card-title">Default</h3>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
                                </div>
                            </li>
                            <li>
                                <div class="uk-card uk-card-primary uk-card-hover uk-card-body">
                                    <h3 class="uk-card-title">Primary</h3>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
                                </div>
                            </li>
                            <li>
                                <div class="uk-card uk-card-secondary uk-card-hover uk-card-body">
                                    <h3 class="uk-card-title">Secondary</h3>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
                                </div>
                            </li>
                            <li>
                                <div class="uk-card uk-card-default uk-card-hover uk-card-body">
                                    <h3 class="uk-card-title">Default</h3>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
                                </div>
                            </li>
                            <li>
                                <div class="uk-card uk-card-primary uk-card-hover uk-card-body">
                                    <h3 class="uk-card-title">Primary</h3>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
                                </div>
                            </li>
                            <li>
                                <div class="uk-card uk-card-secondary uk-card-hover uk-card-body">
                                    <h3 class="uk-card-title">Secondary</h3>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
                                </div>
                            </li>
                        </ul>

                    </div>

                    <a class="uk-position-center-left-out uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slider-item="previous"></a>
                    <a class="uk-position-center-right-out uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slider-item="next"></a>

                </div>

                <ul class="uk-slider-nav uk-dotnav uk-flex-center uk-margin"></ul>

            </div>

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