跳至主要内容

文档

滑块导航

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

用法

要创建带有上一个和下一个按钮的导航，只需将 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 类。

<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 类，以及一个 .uk-position-* 类。

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

作为覆盖层定位

要将滑块导航定位在元素或例如 幻灯片组件 之上，只需添加 定位组件 中的一个 .uk-position-* 类。要在容器上创建定位上下文，请添加 .uk-position-relative 类。

使用 反转组件 中的 .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>

注意 您还可以应用 可见性组件，以便滑块导航仅在悬停时显示。

  • <div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slideshow>

    <div class="uk-slideshow-items">
        <div>
            <img src="images/photo.jpg" alt="" uk-cover>
        </div>
        <div>
            <img src="images/dark.jpg" alt="" uk-cover>
        </div>
        <div>
            <img src="images/light.jpg" alt="" uk-cover>
        </div>
    </div>

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