幻灯片导航
定义带有上一个和下一个按钮的导航，以便在幻灯片放映中进行切换。
用法
要使用上一个和下一个按钮创建导航，只需将uk-slidenav 属性添加到 <a>
元素。在属性上添加previous 或 next 参数，将导航项设置为上一个或下一个按钮的样式。
<a href="" uk-slidenav-next></a>
<a href="" uk-slidenav-previous></a>
尺寸放大
要增加幻灯片导航图标的大小，请添加 .uk-slidenav-large class。
<a href="" class="uk-slidenav-large" uk-slidenav-next></a>
<a href="" class="uk-slidenav-large" uk-slidenav-previous></a>
-
<a href="#" class="uk-slidenav-large" uk-slidenav-previous></a> <a href="#" class="uk-slidenav-large" uk-slidenav-next></a>
幻灯片导航的容器
要显示相连的滑动导航，需要将幻灯片导航项目放在一个<div> 元素内，并添加 .uk-slidenav-container
class，以及一个 .uk-position-* class。
<div class="uk-slidenav-container">
<a href="" uk-slidenav-previous></a>
<a href="" uk-slidenav-next></a>
</div>
-
<div class="uk-slidenav-container"> <a href="" uk-slidenav-previous></a> <a href="" uk-slidenav-next></a> </div>
遮罩上定位
例如，要将slidenav放置在元素或Slideshow component 顶部，只需添加Position 组件中的.uk-position-* class。
若要在容器上创建定位关联，请添加 .uk-position-relative class。
使用Inverse 组件中的.uk-light 或 .uk-dark
可以应用浅色或深色以获得更好的可见性。
<div class="uk-position-relative uk-light">
<!-- The element which is wrapped goes here -->
<a class="uk-position-center-left" href="" uk-slidenav-previous></a>
<a class="uk-position-center-right" href="" uk-slidenav-next></a>
</div>
Note 你还可以使用 Visibility 组件, 以便幻灯片导航仅在鼠标悬停时显示。
-
<div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slideshow> <ul class="uk-slideshow-items"> <li> <img src="images/photo.jpg" alt="" uk-cover> </li> <li> <img src="images/dark.jpg" alt="" uk-cover> </li> <li> <img src="images/light.jpg" alt="" uk-cover> </li> </ul> <a class="uk-slidenav-large uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slideshow-item="previous"></a> <a class="uk-slidenav-large uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slideshow-item="next"></a> </div>
