UIkit3.x文档

幻灯片导航

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

用法

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

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