Slidenav

Defines a navigation with previous and next buttons to browse through slideshows.

Usage

To create a navigation with previous and next buttons, just add the .uk-slidenav class to <a> elements. Add the .uk-slidenav-previous or .uk-slidenav-next class to style the nav items as previous or next buttons.

Example

Markup

<a href="" class="uk-slidenav uk-slidenav-previous"></a>
<a href="" class="uk-slidenav uk-slidenav-next"></a>

Position slidenav

To position the Slidenav over any content, like a slideshow or an image, just wrap the nav and content inside a container element and add the .uk-slidenav-position class. That way the previous and next buttons will be centered vertically and aligned to the left and right. The Slidenav will only be visible when hovering the content.

Markup

<div class="uk-slidenav-position">
    <img src="" alt="">
    <a href="" class="uk-slidenav uk-slidenav-previous"></a>
    <a href="" class="uk-slidenav uk-slidenav-next"></a>
</div>

Slidenav and images

For better visibility on images, for example when using the Slidenav as a slideshow navigation, just add the .uk-slidenav-contrast class.

Markup

<a href="" class="uk-slidenav uk-slidenav-contrast uk-slidenav-previous"></a>
<a href="" class="uk-slidenav uk-slidenav-contrast uk-slidenav-next"></a>