# 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>