Question

创建带有上一个和下一个按钮的导航，用来浏览幻灯片。

用法

创建有上一个和下一个按钮的导航，添加 .uk-slidenav 类到 <a> 元素就行。添加 .uk-slidenav-previous 或 .uk-slidenav-next 类来定义导航条目作为上一个和下一个按钮。注意 使用此组件需要额外添加 slidenav.css 文件，在css/components文件夹中。

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

滑动导航的定位

在任意内容上面定位滑动导航，比如在幻灯片或者图片上，只需要将导航有内容包含在一个容器元素中，并添加 .uk-slidenav-position 类即可。这样子，上一个和下一个按钮将会分别被垂直居中在左边和右边。滑动导航只在鼠标悬停在内容上时可见。

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

滑动导航与图片

为了在图片上有更好的可见性，比如使用滑动导航作为幻灯片的导航时，只需添加 .uk-slidenav-contrast 类。

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