跳到主要内容

文档

Slideshow

创建包含图片和视频的响应式轮播。

轮播（Slideshow）组件完全响应式，支持触摸、滑动导航，在桌面端还支持鼠标拖拽。在幻灯片之间滑动时，动画会紧紧跟随你的指尖或鼠标光标。当你点击上一个、下一个导航时，动画会加速以跟上你的操作节奏。所有动画都启用了硬件加速，以获得更流畅的性能。

用法

要使用该组件，为容器元素添加 uk-slideshow 属性，并使用 .uk-slideshow-items 类创建幻灯片列表。

使用来自 Cover 组件 的 uk-cover 属性，为每张幻灯片的背景添加一张图片。

<div uk-slideshow>
    <div class="uk-slideshow-items">
        <div>
            <img src="" alt="" uk-cover>
        </div>
    </div>
</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-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>

注意 要对幻灯片中的图片进行懒加载，请使用 loading="lazy" 属性。Slideshow 会自动移除相邻幻灯片中图片上的该属性。

动画

默认情况下，轮播使用 slide 动画。可以设置 animation 选项来使用其他动画。可选值如下：

动画 描述
slide 幻灯片横向滑入。
fade 幻灯片淡入。
scale 幻灯片放大的同时淡出。
pull 幻灯片从牌堆中拉出。
push 幻灯片被推入牌堆。 
<div uk-slideshow="animation: fade">…</div>
Slide
Fade
Scale
Pull
Push
<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>

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

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

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

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

            <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-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: true 选项。还可以使用 autoplay-interval: 6000 设置切换幻灯片之间的间隔，单位为毫秒。要在悬停轮播时暂停自动播放，请使用 pause-on-hover: true。

<div uk-slideshow="autoplay: true">…</div>

无限滚动

默认情况下，无限滚动是启用的。要禁用这一行为，只需为属性添加 finite: true 选项。

<div uk-slideshow="finite: true">…</div>

宽高比

轮播始终占满其父容器的全部宽度。高度会根据所定义的宽高比自适应。要改变默认的 16:9 宽高比，只需为属性添加 ratio 选项。建议使用与背景图片相同的宽高比。例如，直接使用图片的宽度和高度，写成 1600:1200。

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

    <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-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-height 和 max-height 选项设置最小或最大高度。

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

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

视口高度

为幻灯片列表添加来自 Height 组件 的 uk-height-viewport 属性，可将高度拉伸至填满整个视口。可以设置 min-height 选项来定义最小高度。

<div uk-slideshow="ratio: false">
    <ul class="uk-slideshow-items" uk-height-viewport="min: 300">…</ul>
</div>
<div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slideshow="ratio: false">

    <div class="uk-slideshow-items" uk-height-viewport="offset-top: true; offset-bottom: 30">
        <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-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%。

导航

要在幻灯片之间导航，只需使用 uk-slideshow-item 属性。要指向特定幻灯片，将每个导航项的属性设置为对应幻灯片项的索引数字。带有 uk-slideshow-item 属性的元素必须位于 uk-slideshow 容器内部。将属性设置为 next 和 previous 会切换到相邻的幻灯片。

<div uk-slideshow>

    <div class="uk-slideshow-items">…</div>

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

Slideshow 组件的灵活性让你可以使用任意其他 UIkit 组件来在各个项目之间导航。例如，可以使用 Slidenav、Dotnav 和 Thumbnav 组件来设置轮播导航的样式。

如果导航项中没有项目特定的内容，你也可以添加 .uk-slideshow-nav 类，而不必手动添加导航项。它会自动以 <li><a href></a></li> 作为标记生成这些项目。使用 Dotnav 时，这是一个便捷的简写方式。

<div uk-slideshow>

    <div class="uk-slideshow-items">…</div>

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

</div>
    <div uk-slideshow="animation: push">

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

        <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-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 组件 的 .uk-light 或 .uk-dark 类。

    视差动画

    除了使用导航控件逐步切换动画之外，轮播还可以基于其在视口中的滚动位置，使用无级视差动画。只需为属性添加 parallax: true。如果在标记中设置了导航，它将无法点击，但会获得当前幻灯片的激活状态。

    <div uk-slideshow="parallax: true">…</div>
      <div uk-slideshow="animation: push; parallax: true;">

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

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

</div>

      要调整视差时长，请设置 parallax-start 和 parallax-end 选项。parallax-start 选项定义动画何时开始。默认值 0 表示轮播的上边框与视口的下边框相交。end 选项定义动画何时结束。默认值 0 表示轮播的下边框与视口的上边框相交。取值可以使用任意尺寸单位，即 vh、% 和 px。% 单位相对于轮播的高度。这两个选项都支持基本的数学运算符 + 和 -。

      <div uk-slideshow="parallax: true; parallax-start: 100%; parallax-end: 100%;">…</div>
        <div uk-slideshow="animation: push; parallax: true; parallax-start: 100%; parallax-end: 100%;">

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

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

</div>

        视频

        轮播并不局限于图片。其他媒体（例如视频）也可以使用来自 Cover 组件 的 uk-cover 属性放置到每张幻灯片的背景中。视频会被静音并自动播放。当视频不可见时会暂停，再次可见时恢复播放。

        <div uk-slideshow>
    <div class="uk-slideshow-items">
        <div>
            <video src="" autoplay loop muted playsinline uk-cover></video>
        </div>
        <div>
            <iframe src="" uk-cover></iframe>
        </div>
    </div>
</div>
        <div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slideshow="animation: push">

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

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

        要添加一个简单的 Ken Burns 效果，用 div 包裹图片，并添加 .uk-position-cover 和 .uk-animation-kenburns 类。你也可以应用 .uk-animation-reverse 或来自 Utility 组件 的 .uk-transform-origin-* 系列类之一来调整该效果。

        <div uk-slideshow>
    <div class="uk-slideshow-items">
        <div>
            <div class="uk-position-cover uk-animation-kenburns uk-animation-reverse uk-transform-origin-center-left">
                <img src="" alt="" uk-cover>
            </div>
        </div>
    </div>
</div>
        <div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slideshow="animation: push">

    <div class="uk-slideshow-items">
        <div>
            <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>
        </div>
        <div>
            <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>
        </div>
        <div>
            <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>
        </div>
    </div>

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

        内容叠层

        使用 Position 组件 添加内容叠层。它可以让你把内容放置在幻灯片内的任意位置。

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

                <!-- The content goes here -->

            </div>
        </div>
    </div>
</div>

        注意 为了让内容在每张图片上都清晰可见，请添加来自 Inverse 组件 的 .uk-light 或 .uk-dark 类，或者使用 Overlay 为叠层框添加任意样式。

        Center

        Lorem ipsum dolor sit amet, consectetur adipiscing elit.

        Bottom

        Lorem ipsum dolor sit amet, consectetur adipiscing elit.

        Overlay Bottom

        Lorem ipsum dolor sit amet, consectetur adipiscing elit.

        Overlay Bottom Right

        Lorem ipsum dolor sit amet.

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

    <div class="uk-slideshow-items">
        <div>
            <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>
        </div>
        <div>
            <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>
        </div>
        <div>
            <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>
        </div>
        <div>
            <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>
        </div>
    </div>

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

        内容视差

        为幻灯片内的任意元素添加 uk-slideshow-parallax 属性，使其随轮播动画一同运动。为每个想要动画的 CSS 属性添加一个选项，并写入所需的动画值。至少需要定义一个起始值和一个结束值，可以通过传入以逗号分隔的两个值来实现。

        该功能继承自 Parallax 组件，可以依据轮播动画的滚动位置来为 CSS 属性添加动画。请查看 可用属性 了解哪些属性可以添加动画。

        <div uk-slideshow>
    <div class="uk-slideshow-items">
        <div>
            <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>
        </div>
    </div>
</div>

        在上面的示例中，内容会从 100 开始，在幻灯片移入的过程中动画到一半位置的 0。当幻灯片开始移出时，内容会继续动画到 -100。这样可行是因为起始值和结束值的距离相同。如果距离不同，则需要三个值：Start（幻灯片移入）、Middle（幻灯片居中）、End（幻灯片移出）。

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

        下一个示例定义了不同的进入和退出动画。内容从 100 移动到 0 滑入，并从 1 淡出到 0。

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

        Heading

        Lorem ipsum dolor sit amet.

        Heading

        Lorem ipsum dolor sit amet.

        Heading

        Lorem ipsum dolor sit amet.

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

    <div class="uk-slideshow-items">
        <div>
            <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>
        </div>
        <div>
            <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>
        </div>
        <div>
            <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>
        </div>
    </div>

    <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 动画被扩展为：图片滑出时同时变暗并缩小。

        <div uk-slideshow="animation: push">
    <div class="uk-slideshow-items">
        <div>
            <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>
        </div>
    </div>
</div>

        Heading

        Lorem ipsum dolor sit amet.

        Heading

        Lorem ipsum dolor sit amet.

        Heading

        Lorem ipsum dolor sit amet.

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

    <div class="uk-slideshow-items">
        <div>
            <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>
        </div>
        <div>
            <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>
        </div>
        <div>
            <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>
        </div>
    </div>

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

        内容过渡

        幻灯片内会自动触发来自 Transition 组件 的过渡类。与视差效果不同，过渡并不依附于轮播动画，而是在轮播动画结束后独立开始播放。

        <div uk-slideshow>
    <div class="uk-slideshow-items">
        <div>
            <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>
        </div>
    </div>
</div>

        配合 Overlay 组件，内容过渡可用于为轮播构建经典的字幕效果。

        Bottom

        Lorem ipsum dolor sit amet, consectetur adipiscing elit.

        Bottom

        Lorem ipsum dolor sit amet, consectetur adipiscing elit.

        Left

        Lorem ipsum dolor sit amet, consectetur adipiscing elit.

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

    <div class="uk-slideshow-items">
        <div>
            <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>
        </div>
        <div>
            <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>
        </div>
        <div>
            <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>
        </div>
    </div>

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

        组件选项

        以下任意选项都可以应用到组件属性上。多个选项之间用分号分隔。了解更多

        轮播

        选项 值 默认值 描述
        animation String slide 轮播动画模式（slide、fade、scale、pull 或 push）。
        autoplay Boolean false 轮播自动播放。
        autoplay-interval Number 7000 自动播放模式下切换幻灯片之间的延迟。
        draggable Boolean true 启用指针拖拽。
        easing String ease 动画缓动方式（CSS 时间函数或 cubic-bezier）。
        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 组件 的更多内容。

        初始化

        UIkit.slideshow(element, options);

        事件

        以下事件会在绑定了该组件的元素上触发：

        名称 描述
        beforeitemshow 在项目被显示之前触发。
        itemshow 在项目被显示之后触发。
        itemshown 在项目的显示动画完成之后触发。
        beforeitemhide 在项目被隐藏之前触发。
        itemhide 在项目的隐藏动画开始之后触发。
        itemhidden 在项目的隐藏动画完成之后触发。

        方法

        该组件提供以下方法：

        显示

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

        显示轮播项目。

        startAutoplay

        UIkit.slideshow(element).startAutoplay();

        启动轮播自动播放。

        stopAutoplay

        UIkit.slideshow(element).stopAutoplay();

        停止轮播自动播放。

        可访问性

        Slideshow 组件遵循 Carousel WAI-ARIA 设计模式，并会自动设置合适的 WAI-ARIA 角色、状态和属性。

        选项卡导航遵循 tab 模式。

        上一个/下一个导航遵循 button 模式。

        键盘交互

        当 Slideshow 组件中的任意元素获得焦点时，自动播放会停止。可以通过以下按键使用键盘访问选项卡导航。

        国际化

        Slideshow 组件使用以下翻译字符串。了解关于 翻译组件 的更多内容。

        键 默认值 描述
        next Next Slide 下一个幻灯片按钮的 aria-label。
        previous Previous Slide 上一个幻灯片按钮的 aria-label。
        slideX Slide %s 分页幻灯片按钮的 aria-label。
        slideLabel %s of %s 幻灯片的 aria-label。