滑动导航/Slidenav
最后更新于:2022-04-01 22:22:59
# 滑动导航/Slidenav
创建带有上一个和下一个按钮的导航,用来浏览幻灯片。
## 用法
创建有上一个和下一个按钮的导航,添加 `.uk-slidenav` 类到 `<a>` 元素就行。添加 `.uk-slidenav-previous` 或 `.uk-slidenav-next` 类来定义导航条目作为上一个和下一个按钮。注意 使用此组件需要额外添加 `slidenav.css` 文件,在`css/components`文件夹中。
### Example
![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-05-12_57346f3b6ecc2.jpg)
### Markup
```
```
* * *
## 滑动导航的定位
在任意内容上面定位滑动导航,比如在幻灯片或者图片上,只需要将导航有内容包含在一个容器元素中,并添加 `.uk-slidenav-position` 类即可。这样子,上一个和下一个按钮将会分别被垂直居中在左边和右边。滑动导航只在鼠标悬停在内容上时可见。
![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-05-12_57346f3b7d7f3.jpg)
### Markup
```
```
* * *
## 滑动导航与图片
为了在图片上有更好的可见性,比如使用滑动导航作为幻灯片的导航时,只需添加 `.uk-slidenav-contrast` 类。
![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-05-12_57346f3b8e2a1.jpg)
### Markup
```
```
';