幻灯片

创建一个带有图像和视频的响应式幻灯片。

幻灯片组件是完全响应式的，支持触摸和滑动导航，以及桌面的鼠标拖动。在幻灯片之间滑动时，动画会真正地粘在您的指尖或鼠标光标上。当您单击上一个和下一个导航时，它会加速以跟上您的节奏。所有动画都经过硬件加速，以获得更流畅的性能。

用法

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

使用覆盖组件的 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" 属性。幻灯片将自动删除相邻幻灯片中图像的该属性。

动画

默认情况下，幻灯片使用 slide 动画。您可以设置 animation 选项以使用不同的动画。可能的值如下

动画	描述
`slide`	幻灯片并排滑动。
`fade`	幻灯片淡入。
`scale`	幻灯片放大并淡出。
`pull`	幻灯片从牌组中拉出。
`push`	幻灯片被推到牌组中。

<div uk-slideshow="animation: fade">…</div>

滑动

淡入

缩放

拉出

推入

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

视口高度

将高度组件中的 uk-height-viewport 属性添加到幻灯片项目列表中，会将高度拉伸以填充整个视口。您可以设置 min-height 选项来定义最小高度。

<div uk-slideshow="ratio: false">
    <ul class="uk-slideshow-items" uk-height-viewport="min-height: 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>

幻灯片组件的灵活性允许您使用任何其他 UIkit 组件来浏览项目。例如，可以使用 Slidenav、Dotnav 和 Thumbnav 组件来设置幻灯片导航的样式。

如果导航项中没有特定于项目的内容，您还可以添加 .uk-slideshow-nav 类，而不是手动添加导航项。它将使用 <li><a href></a></li> 作为标记自动生成其项目。当使用点导航时，这是一个有用的快捷方式。

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

注意为了更好地显示叠加导航，请添加反色组件中的 .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>

视频

幻灯片不限于图像。其他媒体（如视频）可以使用覆盖组件中的 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/site/images/media/yootheme-pro.mp4" autoplay loop muted playsinline uk-cover></video>
        </div>
        <div>
            <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" 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>

肯·伯恩斯效果

要添加简单的肯·伯恩斯效果，请用 div 包裹图像，并添加 .uk-position-cover 和 .uk-animation-kenburns 类。您还可以应用 .uk-animation-reverse 或实用工具组件中的 .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>

内容叠加

使用定位组件添加内容叠加层。它允许您将内容放置在幻灯片内的任何位置。

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

注意要使您的内容更好地适应每张图像的可见性，请添加反色组件中的 .uk-light 或 .uk-dark 类，或使用叠加层为叠加框添加任何样式。

居中

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

底部

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

叠加层底部

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

叠加层右下角

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 属性添加具有所需动画值的选项。定义至少一个起始值和一个结束值。可以通过传递用逗号分隔的两个值来完成此操作。

此功能继承自视差组件，它允许根据幻灯片动画的滚动位置来动画 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。之所以这样工作，是因为起始值和结束值具有相同的距离。对于不同的距离，需要三个值：开始（幻灯片动画移入）、中间（幻灯片居中）、结束（幻灯片动画移出）。

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

标题

Lorem ipsum dolor sit amet.

标题

Lorem ipsum dolor sit amet.

标题

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>

标题

Lorem ipsum dolor sit amet.

标题

Lorem ipsum dolor sit amet.

标题

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>

内容过渡

过渡组件的过渡类在幻灯片内自动触发。与视差效果相反，过渡不附加到幻灯片动画，并在幻灯片动画之后独立开始播放。

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

与叠加层组件一起，内容过渡用于构建幻灯片的经典标题。

底部

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

底部

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

左侧

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>

组件选项

可以将以下任何选项应用于组件属性。用分号分隔多个选项。了解更多

幻灯片

选项	值	默认值	描述
`动画`	字符串	`slide`	幻灯片动画模式（`slide`、`fade`、`scale`、`pull` 或 `push`）。
`自动播放`	布尔值	`false`	幻灯片自动播放。
`自动播放间隔`	数字	`7000`	自动播放模式下切换幻灯片之间的延迟。
`可拖动`	布尔值	`true`	启用指针拖动。
`缓动`	字符串	`ease`	动画缓动 (CSS timing functions 或 cubic-bezier)。
`有限`	布尔值	`false`	禁用无限滑动。
`鼠标悬停时暂停`	布尔值	`true`	鼠标悬停时暂停自动播放模式。
`索引`	数字	`0`	要显示的幻灯片项目。基于 0 的索引。
`速度`	数字	`1`	动画速度 (像素/毫秒)。
`比例`	布尔值，字符串	`16:9`	比例。(`false` 阻止高度调整)
`最小高度`	布尔值，数字	`false`	最小高度。
`最大高度`	布尔值，数字	`false`	最大高度。

JavaScript

了解更多关于 JavaScript 组件的信息。

初始化

UIkit.slideshow(element, options);

事件

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

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

方法

以下方法可用于该组件

显示

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

显示幻灯片项目。

开始自动播放

UIkit.slideshow(element).startAutoplay();

开始幻灯片自动播放。

停止自动播放

UIkit.slideshow(element).stopAutoplay();

停止幻灯片自动播放。

可访问性

幻灯片组件遵循轮播 WAI-ARIA 设计模式并自动设置适当的 WAI-ARIA 角色、状态和属性。

幻灯片 的 aria-roledescription 属性设置为 carousel。
幻灯片列表 具有 ID 和 aria-live 属性。
幻灯片 具有 ID，如果幻灯片仅具有上一个/下一个导航，则具有 group 角色，如果具有选项卡导航，则具有 tabpanel 角色，aria-roledescription 属性设置为 slide 和 aria-label 属性。

选项卡导航遵循选项卡模式。

选项卡导航 具有 tablist 角色。
选项卡导航项 具有 presentation 角色。
选项卡导航链接 具有 tab 角色，aria-selected 状态，aria-controls 属性设置为相应幻灯片的 ID，以及 aria-label 属性。

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

上一个/下一个导航项 具有 aria-label 属性，aria-controls 属性设置为幻灯片列表的 ID，如果使用 <a> 元素，则具有 button 角色。

键盘交互

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

tab 或 shift+tab 键将焦点放在选项卡导航中的活动选项卡上。如果焦点已经在活动选项卡上，则焦点将移动到选项卡导航之外的下一个元素。
左/右箭头 或 上/下箭头 键（取决于方向）在选项卡之间导航。相应的幻灯片将自动变为活动状态。如果焦点在最后一个选项卡上，则它会移动到第一个选项卡。
home 或 end 键将焦点移动到第一个或最后一个选项卡。

国际化

幻灯片组件使用以下翻译字符串。了解更多关于翻译组件的信息。

键	默认值	描述
`下一个`	`下一张幻灯片`	下一个幻灯片按钮的 `aria-label`。
`上一个`	`上一张幻灯片`	上一个幻灯片按钮的 `aria-label`。
`幻灯片X`	`幻灯片 %s`	分页幻灯片按钮的 `aria-label`。
`幻灯片标签`	`%s / %s`	幻灯片的 `aria-label`。

文档

幻灯片

居中

底部

叠加层底部

叠加层右下角

标题

标题

标题

标题

标题

标题

底部

底部

左侧