幻灯片导航／Slidenav

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

用法

要使用上一个和下一个按钮创建导航，只需将 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 class可以应用浅色或深色以获得更好的可见性。

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

注意 你还可以使用 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>

上一篇： Section

下一篇： Slider

slidenav.md

# 幻灯片导航／Slidenav

<p class="uk-text-lead">定义带有上一个和下一个按钮的导航，以便在幻灯片放映中进行切换。</p>

## Usage-用法

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

```html
<a href="" uk-slidenav-next></a>
<a href="" uk-slidenav-previous></a>
```

```example
<a href="#" uk-slidenav-previous></a>
<a href="#" uk-slidenav-next></a>
```

***

## Large modifier-尺寸放大

要增加幻灯片导航图标的大小，请添加 `.uk-slidenav-large` class。

```html
<a href="" class="uk-slidenav-large" uk-slidenav-next></a>
<a href="" class="uk-slidenav-large" uk-slidenav-previous></a>
```

```example
<a href="#" class="uk-slidenav-large" uk-slidenav-previous></a>
<a href="#" class="uk-slidenav-large" uk-slidenav-next></a>
```

***

## Slidenav container-幻灯片导航的容器

要显示相连的滑动导航，需要将幻灯片导航项目放在一个 `<div>` 元素内，并添加 `.uk-slidenav-container` class，以及一个  `.uk-position-*` class。

```html
<div class="uk-slidenav-container">
    <a href="" uk-slidenav-previous></a>
    <a href="" uk-slidenav-next></a>
</div>
```

```example
<div class="uk-slidenav-container">
    <a href="" uk-slidenav-previous></a>
    <a href="" uk-slidenav-next></a>
</div>
```

***

## Position as overlay-遮罩上定位

例如，要将slidenav放置在元素或 [Slideshow 组件](slideshow.md) 顶部，只需添加 [Position 组件](position.md) 中的 `.uk-position-*` class。若要在容器上创建定位关联，请添加 `.uk-position-relative` class。

使用 [Inverse 组件](inverse.md) 中的 `.uk-light` 或 `.uk-dark` class可以应用浅色或深色以获得更好的可见性。

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

**注意** 你还可以使用 [Visibility 组件](visibility.md#show-on-hover)，以便幻灯片导航仅在鼠标悬停时显示。

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