幻灯片／Slideshow

# 幻灯片／Slideshow

<p class="uk-text-lead">创建包含图像和视频的响应式幻灯片。</p>

幻灯片组件具有完全的响应能力，并支持触摸和滑动导航以及桌面的鼠标拖动。 在幻灯片之间拖动时，动画会粘在您的指尖或鼠标光标处。 当您单击上一个和下一个导航时，它还会加快速度跟上您的速度。 所有动画都是硬件加速，以实现更流畅的性能。

## Usage-用法

要应用此组件，请添加 `uk-slideshow` 属性到容器元素，并使用 `.uk-slideshow-items` class创建幻灯片列表。

使用 [Cover 组件](cover.md) 中的 `uk-cover` 属性在每张幻灯片的背景中添加图像。

```html
<div uk-slideshow>
    <ul class="uk-slideshow-items">
        <li>
            <img src="" alt="" uk-cover>
        </li>
    </ul>
</div>
```

```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-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slideshow-item="previous"></a>
    <a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slideshow-item="next"></a>

</div>
```

**注意** 要在幻灯片中延迟加载图像，请查看 [Image 组件](image.md#target).

***

## Animations-动画

默认情况下，幻灯片使用 `slide` 动画。可以将 `animation` 选项设置为使用其他动画。可用的值如下：

| Animation | 描述                        |
|:----------|:-----------------------------------|
| `slide`   | 幻灯片并排滑入      |
| `fade`    | 幻灯片淡入                    |
| `scale`   | 幻灯片按比例放大并淡出 |
| `pull`    | 拉出效果   |
| `push`    | 推动效果    |


```html
<div uk-slideshow="animation: fade">...</div>
```

```example
<div class="uk-child-width-1-2@m" uk-grid>
    <div>

        <div class="uk-h3">Slide</div>

        <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-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slideshow-item="previous"></a>
            <a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slideshow-item="next"></a>

        </div>

    </div>
    <div>

        <div class="uk-h3">Fade</div>

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

            <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-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slideshow-item="previous"></a>
            <a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slideshow-item="next"></a>

        </div>

    </div>
    <div>

        <div class="uk-h3">Scale</div>

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

            <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-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slideshow-item="previous"></a>
            <a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slideshow-item="next"></a>

        </div>

    </div>
    <div>

        <div class="uk-h3">Pull</div>

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

            <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-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slideshow-item="previous"></a>
            <a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slideshow-item="next"></a>

        </div>

    </div>
    <div>

        <div class="uk-h3">Push</div>

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

            <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-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slideshow-item="previous"></a>
            <a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slideshow-item="next"></a>

        </div>

    </div>
</div>
```

***

## Autoplay-自动播放

要激活自动播放，只需将 `autoplay: true` 选项添加到属性中。您还可以使用 `autoplay-interval: 6000`设置幻灯片切换的时间间隔（以毫秒为单位）。要在鼠标悬停到幻灯片上时暂停自动播放，请使用 `pause-on-hover: true`。

```html
<div uk-slideshow="autoplay: true">...</div>
```

***

## Infinite Scrolling-循环滚动

无限滚动默认启用，要禁用此行为，只需将 `finite: true` 选项添加到属性。

```html
<div uk-slideshow="finite: true">...</div>
```

***

## Ratio-比例

T幻灯片始终占据父容器的整个宽度。高度根据定义的比率进行调整。默认比例为16:9，如果要修改它只需将 `ratio` 项添加到属性。建议使用与背景图像相同的比率。比如直接使用图片的宽度和高度，例如 `1600:1200`.

```html
<div uk-slideshow="ratio: 7:3">...</div>
```

```example
<div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slideshow="ratio: 7:3; animation: push">

    <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-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slideshow-item="previous"></a>
    <a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slideshow-item="next"></a>

</div>
```

***

## Min/Max height-最小/最大高度

幻灯片默认高度根据您定义的宽高比例来决定，可以使用 `min-height` 和 `max-height` 选项来设置最小高度或最大高度。

```html
<div uk-slideshow="min-height: 300; max-height: 600">...</div>
```

```example
<div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slideshow="min-height: 300; max-height: 600; animation: push">

    <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-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slideshow-item="previous"></a>
    <a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slideshow-item="next"></a>

</div>
```

***

## Viewport height-视口高度

添加 [Height 组件](height.md#viewport-height) 中的 `uk-height-viewport` 属性到幻灯片项列表中，将拉伸高度填充整个视口。可以设置 `min-height` 选项来定义最小高度。

```html
<div uk-slideshow="ratio: false">
    <ul class="uk-slideshow-items" uk-height-viewport="min-height: 300">...</ul>
</div>
```

```example
<div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slideshow="ratio: false">

    <ul class="uk-slideshow-items" uk-height-viewport="offset-top: true; offset-bottom: 30">
        <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-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slideshow-item="previous"></a>
    <a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slideshow-item="next"></a>

</div>
```

**注意** 这个示例设置为视口高度的70％。

***

## Navigation-圆点导航

要浏览幻灯片，只需使用 `uk-slideshow-item` 属性。要定位到特定的幻灯片，请将每个导航项的属性设置为相应幻灯片放映项的索引号。具有 `uk-slideshow-item` 属性的元素必须位于 `uk-slideshow` 容器中。将属性设置为 `next` 和 `previous` 将切换到相邻的幻灯片。

```html
<div uk-slideshow>

    <ul class="uk-slideshow-items">...</ul>

    <a href="#" uk-slideshow-item="previous">...</a>
    <a href="#" uk-slideshow-item="next">...</a>

    <ul>
        <li uk-slideshow-item="0"><a href="#">...</a></li>
        <li uk-slideshow-item="1"><a href="#">...</a></li>
        <li uk-slideshow-item="2"><a href="#">...</a></li>
    </ul>

</div>
```

幻灯片组件的灵活性使您可以使用任何其他UIkit组件来浏览项目。例如可以使用 [Slidenav](slidenav.md), [Dotnav](dotnav.md) 和 [Thumbnav](thumbnav.md) 组件设置幻灯片放映导航的样式。

如果导航项中没有特定的项目内容，那么也可以添加 `.uk-slideshow-nav` class，而不是手动添加导航项。它将使用 `<li><a href="#"></a></li>` 作为标记自动生成项目。使用 [Dotnav](dotnav.md)时，这是简便的实用方式。

```html
<div uk-slideshow>

    <ul class="uk-slideshow-items">...</ul>

    <ul class="uk-slideshow-nav uk-dotnav"></ul>

</div>
```

```example
<div uk-slideshow="animation: push">

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

        <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-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slideshow-item="previous"></a>
        <a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slideshow-item="next"></a>

    </div>

    <ul class="uk-slideshow-nav uk-dotnav uk-flex-center uk-margin"></ul>

</div>
```

**注意** 为了更好地显示遮罩导航，请添加 [Inverse component](inverse.md) 中的 `.uk-light` 或 `.uk-dark` class。

***

## Videos-视频

幻灯片内容元素不仅限于图像。可以使用 [Cover 组件](cover.md) 中的 `uk-cover` 属性将其他媒体（例如视频）放置在幻灯片的背景中。视频将被静音并且自动播放。视频不可见时将暂停，再次可见时继续播放。

```html
<div uk-slideshow>
    <ul class="uk-slideshow-items">
        <li>
            <video src="" autoplay loop muted playsinline uk-cover></video>
        </li>
        <li>
            <iframe src="" frameborder="0" uk-cover></iframe>
        </li>
    </ul>
</div>
```

```example
<div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slideshow="animation: push">

    <ul class="uk-slideshow-items">
        <li>
            <img src="images/photo.jpg" alt="" uk-cover>
        </li>
        <li>
            <video src="https://yootheme.com/site/images/media/yootheme-pro.mp4" autoplay loop muted playsinline uk-cover></video>
        </li>
        <li>
            <iframe src="https://www.youtube-nocookie.com/embed/c2pz2mlSfXA?autoplay=1&amp;controls=0&amp;showinfo=0&amp;rel=0&amp;loop=1&amp;modestbranding=1&amp;wmode=transparent&amp;playsinline=1" width="1920" height="1080" frameborder="0" allowfullscreen uk-cover></iframe>
        </li>
    </ul>

    <a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slideshow-item="previous"></a>
    <a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slideshow-item="next"></a>

</div>
```

***

## Ken Burns effect-Ken Burns 效果

要添加简单的Ken Burns效果，请用 `div` 包裹图片并为div添加 `.uk-position-cover` 和 `.uk-animation-kenburns` class。您还可以应用 [Utility 组件](utility.md#transform-origin) 中的 `.uk-animation-reverse` 或 `.uk-transform-origin-*` classe之一来修改效果。

```html
<div uk-slideshow>
    <ul class="uk-slideshow-items">
        <li>
            <div class="uk-position-cover uk-animation-kenburns uk-animation-reverse uk-transform-origin-center-left">
                <img src="" alt="" uk-cover>
            </div>
        </li>
    </ul>
</div>
```

```example
<div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slideshow="animation: push">

    <ul class="uk-slideshow-items">
        <li>
            <div class="uk-position-cover uk-animation-kenburns uk-animation-reverse uk-transform-origin-center-left">
                <img src="images/photo.jpg" alt="" uk-cover>
            </div>
        </li>
        <li>
            <div class="uk-position-cover uk-animation-kenburns uk-animation-reverse uk-transform-origin-top-right">
                <img src="images/dark.jpg" alt="" uk-cover>
            </div>
        </li>
        <li>
            <div class="uk-position-cover uk-animation-kenburns uk-animation-reverse uk-transform-origin-bottom-left">
                <img src="images/light.jpg" alt="" uk-cover>
            </div>
        </li>
    </ul>

    <a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slideshow-item="previous"></a>
    <a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slideshow-item="next"></a>

</div>
```

***

## Content overlays-内容遮罩

使用 [Position 组件](position.md)添加内容遮罩，它允许您将内容放在幻灯片中的任何位置。

```html
<div uk-slideshow>
    <ul class="uk-slideshow-items">
        <li>
            <img src="" alt="" uk-cover>
            <div class="uk-position-center uk-position-small">

                <!-- The content goes here -->

            </div>
        </li>
    </ul>
</div>
```

**注意** 若要调整内容以更好地显示每个图片，请添加 [Inverse 组件](inverse.md) 中的 `.uk-light` 或 `.uk-dark` class，或使用 [Overlay](overlay.md) 将任何样式添加到覆盖框中。

```example
<div class="uk-position-relative uk-visible-toggle" tabindex="-1" uk-slideshow="animation: push">

    <ul class="uk-slideshow-items">
        <li>
            <img src="images/photo.jpg" alt="" uk-cover>
            <div class="uk-position-center uk-position-small uk-text-center uk-light">
                <h2 class="uk-margin-remove">Center</h2>
                <p class="uk-margin-remove">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
        </li>
        <li>
            <img src="images/dark.jpg" alt="" uk-cover>
            <div class="uk-position-bottom uk-position-medium uk-text-center uk-light">
                <h3 class="uk-margin-remove">Bottom</h3>
                <p class="uk-margin-remove">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
        </li>
        <li>
            <img src="images/light.jpg" alt="" uk-cover>
            <div class="uk-overlay uk-overlay-primary uk-position-bottom uk-text-center">
                <h3 class="uk-margin-remove">Overlay Bottom</h3>
                <p class="uk-margin-remove">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
        </li>
        <li>
            <img src="images/dark.jpg" alt="" uk-cover>
            <div class="uk-overlay uk-overlay-default uk-position-bottom-right uk-position-small">
                <h3 class="uk-margin-remove">Overlay Bottom Right</h3>
                <p class="uk-margin-remove">Lorem ipsum dolor sit amet.</p>
            </div>
        </li>
    </ul>

    <div class="uk-light">
        <a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slideshow-item="previous"></a>
        <a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slideshow-item="next"></a>
    </div>

</div>
```

***

## Content parallax-内容视差

添加 `uk-slideshow-parallax` 属性到幻灯片内的任意元素，以使其与幻灯片动画一起设置动画。为要设置动画的每个CSS属性添加一个具有所需动画值的选项。至少定义一个起始值和结束值。可以通过传递两个用逗号分隔的值来完成。

该功能继承自 [Parallax 组件](parallax.md), , 它允许根据幻灯片动画的滚动位置设置CSS属性的动画。看看可以设置动画的 [可用属性](parallax.md#animated-properties) 。

```html
<div uk-slideshow>
    <ul class="uk-slideshow-items">
        <li>
            <img src="" alt="" uk-cover>
            <div class="uk-position-center uk-position-small">

                <div uk-slideshow-parallax="x: 100,-100">

                    <!-- The content goes here -->

                </div>

            </div>
        </li>
    </ul>
</div>
```

在上面的例子中，当幻灯片移入时，内容将从 `100` 开始以动画方式移动至 `0` 。当幻灯片再次开始向外移动出去时，内容将继续移动到- `-100`。这是因为起始值和结束值具有相同的距离。对于不同的距离，需要设置三个值： _Start_ 滑入动画）、 _Middle_ （滑入居中）、 _End_ 滑出动画）。

```html
<div uk-slideshow-parallax="x: 300,0,-100">...</div>
```

下面示例定义了不同的输入和输出动画。幻灯片从 `100` 移动到 `0` 不透明度从 `1` 变为 `0`.

```html
<div uk-slideshow-parallax="x: 100,0,0; opacity: 1,1,0">...</div>
```

```example
<div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slideshow="animation: push">

    <ul class="uk-slideshow-items">
        <li>
            <img src="images/photo.jpg" alt="" uk-cover>
            <div class="uk-position-center uk-position-small uk-text-center">
                <h2 uk-slideshow-parallax="x: 100,-100">Heading</h2>
                <p uk-slideshow-parallax="x: 200,-200">Lorem ipsum dolor sit amet.</p>
            </div>
        </li>
        <li>
            <img src="images/dark.jpg" alt="" uk-cover>
            <div class="uk-position-center uk-position-small uk-text-center">
                <h2 uk-slideshow-parallax="x: 100,-100">Heading</h2>
                <p uk-slideshow-parallax="x: 200,-200">Lorem ipsum dolor sit amet.</p>
            </div>
        </li>
        <li>
            <img src="images/light.jpg" alt="" uk-cover>
            <div class="uk-position-center uk-position-small uk-text-center">
                <h2 uk-slideshow-parallax="y: -50,0,0; opacity: 1,1,0">Heading</h2>
                <p uk-slideshow-parallax="y: 50,0,0; opacity: 1,1,0">Lorem ipsum dolor sit amet.</p>
            </div>
        </li>
    </ul>

    <a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slideshow-item="previous"></a>
    <a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slideshow-item="next"></a>

</div>
```

***

### 进阶效果

视差属性可用于向幻灯片动画添加其他效果。在下面的示例中，`push`  动画通过在图像滑出时变暗并比例缩小图片来扩展动画效果。

```html
<div uk-slideshow="animation: push">
    <ul class="uk-slideshow-items">
        <li>
            <div class="uk-position-cover" uk-slideshow-parallax="scale: 1.2,1.2,1">
                <img src="" alt="" uk-cover>
            </div>
            <div class="uk-position-cover" uk-slideshow-parallax="opacity: 0,0,0.2; backgroundColor: #000,#000"></div>
        </li>
    </ul>
</div>
```

```example
<div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slideshow="animation: push">

    <ul class="uk-slideshow-items">
        <li>
            <div class="uk-position-cover" uk-slideshow-parallax="scale: 1.2,1.2,1">
                <img src="images/photo.jpg" alt="" uk-cover>
            </div>
            <div class="uk-position-cover" uk-slideshow-parallax="opacity: 0,0,0.2; backgroundColor: #000,#000"></div>
            <div class="uk-position-center uk-position-medium uk-text-center">
                <div uk-slideshow-parallax="scale: 1,1,0.8">
                    <h2 uk-slideshow-parallax="x: 200,0,0">Heading</h2>
                    <p uk-slideshow-parallax="x: 400,0,0;">Lorem ipsum dolor sit amet.</p>
                </div>
            </div>
        </li>
        <li>
            <div class="uk-position-cover" uk-slideshow-parallax="scale: 1.2,1.2,1">
                <img src="images/dark.jpg" alt="" uk-cover>
            </div>
            <div class="uk-position-cover" uk-slideshow-parallax="opacity: 0,0,0.2; backgroundColor: #000,#000"></div>
            <div class="uk-position-center uk-position-medium uk-text-center">
                <div uk-slideshow-parallax="scale: 1,1,0.8">
                    <h2 uk-slideshow-parallax="x: 200,0,0">Heading</h2>
                    <p uk-slideshow-parallax="x: 400,0,0;">Lorem ipsum dolor sit amet.</p>
                </div>
            </div>
        </li>
        <li>
            <div class="uk-position-cover" uk-slideshow-parallax="scale: 1.2,1.2,1">
                <img src="images/light.jpg" alt="" uk-cover>
            </div>
            <div class="uk-position-cover" uk-slideshow-parallax="opacity: 0,0,0.2; backgroundColor: #000,#000"></div>
            <div class="uk-position-center uk-position-medium uk-text-center">
                <div uk-slideshow-parallax="scale: 1,1,0.8">
                    <h2 uk-slideshow-parallax="x: 200,0,0">Heading</h2>
                    <p uk-slideshow-parallax="x: 400,0,0;">Lorem ipsum dolor sit amet.</p>
                </div>
            </div>
        </li>
    </ul>

    <a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slideshow-item="previous"></a>
    <a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slideshow-item="next"></a>

</div>
```

## Content transitions-内容缓动动画

幻灯片中会自动触发 [Transition 组件](transition.md) 中的过渡效果class。 与视差效果相反的是，过渡不会附加到幻灯片动画同时执行，并在幻灯片动画结束后再单独执行。

```html
<div uk-slideshow>
    <ul class="uk-slideshow-items">
        <li>
            <img src="" alt="" uk-cover>
            <div class="uk-position-bottom uk-position-small">

                <div class="uk-transition-slide-bottom">

                    <!-- The content goes here -->

                </div>

            </div>
        </li>
    </ul>
</div>
```

内容转换通常和 [Overlay 组件](overlay.md)一起使用构建构建幻灯片的经典标题。

```example
<div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slideshow="animation: fade">

    <ul class="uk-slideshow-items">
        <li>
            <img src="images/photo.jpg" alt="" uk-cover>
            <div class="uk-overlay uk-overlay-primary uk-position-bottom uk-text-center uk-transition-slide-bottom">
                <h3 class="uk-margin-remove">Bottom</h3>
                <p class="uk-margin-remove">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
        </li>
        <li>
            <img src="images/dark.jpg" alt="" uk-cover>
            <div class="uk-overlay uk-overlay-primary uk-position-bottom uk-text-center uk-transition-slide-bottom">
                <h3 class="uk-margin-remove">Bottom</h3>
                <p class="uk-margin-remove">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
        </li>
        <li>
            <img src="images/light.jpg" alt="" uk-cover>
            <div class="uk-overlay uk-overlay-primary uk-position-right uk-text-center uk-transition-slide-right uk-width-medium">
                <h3 class="uk-margin-remove">Left</h3>
                <p class="uk-margin-remove">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
        </li>
    </ul>

    <a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slideshow-item="previous"></a>
    <a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slideshow-item="next"></a>

</div>
```

***

## Component options-组件选项

以下选项中的任何一个都可以应用于组件属性。用分号分隔多个选项。 [了解更多](javascript.md#component-configuration)

### Slideshow

| 选项              | 可用值           | 默认值 | 描述                                                           |
|:--------------------|:----------------|:--------|:----------------------------------------------------------------------|
| `animation`         | String          | `slide` | 幻灯片动画模式： `slide`, `fade`, `scale`, `pull` 或 `push`. |
| `autoplay`          | Boolean         | `false` | 幻灯片自动播放。                                               |
| `autoplay-interval` | Number          | `7000`  | 自动播放模式下幻灯片切换的延迟时间。         |
| `draggable`         | Boolean         | `true ` | 启用指针拖动。                           |
| `easing`            | String  | `ease`     | 动画缓动（CSS计时功能或三次贝塞尔曲线）。           |
| `finite`            | Boolean         | `false` | 禁用循环滑动。                      |
| `pause-on-hover`    | Boolean         | `true` | 鼠标悬停时暂停自动播放模式。          |
| `index`             | Number          | `0`     | 要显示的幻灯片项目。从0开始的索引。    |
| `velocity`          | Number          | `1`     | 动画速度（像素/毫秒）。  |
| `ratio`             | Boolean, String | `16:9`  | 宽高比例 (`false`  防止高度调整)                       |
| `min-height`        | Boolean, Number | `false` | 最小高度。                                                  |
| `max-height`        | Boolean, Number | `false` | 最大高度。          |

***

## JavaScript

了解更多关于 [JavaScript 组件](javascript.md#programmatic-use)的内容。

### 初始化

```js
UIkit.slideshow(element, options);
```

### 事件

将在附加了此组件的元素上触发以下事件：

| Name             | 描述                                               |
|:-----------------|:----------------------------------------------------------|
| `beforeitemshow` | 在显示项目之前触发。                            |
| `itemshow`       | 显示一个项目后触发。                             |
| `itemshown`      | 项目的显示动画完成后触发。       |
| `beforeitemhide` | 隐藏项目前触发。                          |
| `itemhide`       | 项目的隐藏动画开始后触发。         |
| `itemhidden`     | 项目的隐藏动画结束后触发。       |

### 方法

以下方法可用于该组件：

#### Show

```js
UIkit.slideshow(element).show(index);
```

显示幻灯片项目

#### startAutoplay

```js
UIkit.slideshow(element).startAutoplay();
```

启动自动播放

#### stopAutoplay

```js
UIkit.slideshow(element).stopAutoplay();
```

停止自动播放。