幻灯片

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

幻灯片组件完全响应式，支持触摸和滑动导航，以及桌面鼠标拖动。在幻灯片之间滑动时，动画会像你的手指或鼠标光标一样移动。当您点击上一个和下一个导航时，它会加速以跟上您的速度。所有动画都是硬件加速的，以实现更流畅的性能。

用法

要应用此组件，请将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 组件来浏览项目。例如，可以使用滑动导航、点状导航和缩略图导航组件来设置幻灯片导航的样式。

如果导航项目中没有特定项目内容，您也可以添加.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>

组件选项

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

幻灯片

选项	值	默认值	描述
`animation`	字符串	`slide`	幻灯片动画模式 (`slide`、`fade`、`scale`、`pull` 或`push`)。
`autoplay`	布尔值	`false`	幻灯片自动播放。
`autoplay-interval`	数字	`7000`	自动播放模式下切换幻灯片之间的时间间隔。
`draggable`	布尔值	`true`	启用指针拖动。
`easing`	字符串	`ease`	动画缓动 (CSS 定时函数或 cubic-bezier)。
`finite`	布尔值	`false`	禁用无限滑动。
`pause-on-hover`	布尔值	`true`	将鼠标悬停时暂停自动播放模式。
`index`	数字	`0`	要显示的幻灯片项目。以 0 为基点的索引。
`velocity`	数字	`1`	动画速度 (像素/毫秒)。
`ratio`	布尔值，字符串	`16:9`	比例 (`false` 会阻止高度调整)
`min-height`	布尔值，数字	`false`	最小高度。
`max-height`	布尔值，数字	`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();

停止幻灯片自动播放。

无障碍性

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

幻灯片 的 aria-roledescription 属性设置为 carousel。
幻灯片列表 有一个 ID、presentation 角色和 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 键将焦点移动到第一个或最后一个标签。

国际化

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

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

文档

幻灯片

居中

底部

覆盖层底部

覆盖层底部右侧

标题

标题

标题

标题

标题

标题

底部

底部

左侧