UIkit3.x文档

幻灯片导航

定义带有上一个和下一个按钮的导航，以便在幻灯片放映中进行切换。

用法

要使用上一个和下一个按钮创建导航，只需将uk-slidenav 属性添加到 <a> 元素。在属性上添加previous 或 next 参数，将导航项设置为上一个或下一个按钮的样式。

<a href="" uk-slidenav-next></a>
<a href="" uk-slidenav-previous></a>
  • <a href="#" uk-slidenav-previous></a>
<a href="#" uk-slidenav-next></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 组件 顶部，只需添加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>