滑动导航

定义一个带有上一个和下一个按钮的导航，用于浏览幻灯片。

用法

要创建带有上一个和下一个按钮的导航，只需将 .uk-slidenav 类添加到 <a> 元素。添加 .uk-slidenav-previous 或 .uk-slidenav-next 类来将导航项样式化为上一个或下一个按钮。

示例

标记

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