幻灯片放映

创建具有惊艳过渡效果、全屏模式和叠加层的响应式图像或视频幻灯片放映。

用法

要创建幻灯片放映，只需将 .uk-slideshow 类添加到 <ul> 元素，并将您的图像放置在列表项内。 为了加载必要的 JavaScript，还需要添加 data-uk-slideshow 属性。

示例

注意 要激活自动播放，只需将 {autoplay:true} 选项添加到数据属性。

标记

<ul class="uk-slideshow" data-uk-slideshow="{autoplay:true}">
    <li><img src="" width="" height="" alt=""></li>
</ul>

导航

要浏览您的幻灯片，只需使用 data-uk-slideshow-item 属性。 要定位幻灯片，您需要将每个导航项的数据属性设置为相应幻灯片项的编号。 具有 data-uk-slideshow-item 属性的元素需要位于 data-uk-slideshow 容器内。

标记

<div data-uk-slideshow>
    <ul class="uk-slideshow">
        <li></li>
        <li></li>
    </ul>
    <ul>
        <li data-uk-slideshow-item="0"><a href="">...</a></li>
        <li data-uk-slideshow-item="1"><a href="">...</a></li>
    </ul>
</div>

将属性设置为 next 和 previous 将切换到相邻的幻灯片。

标记

<div data-uk-slideshow>
    <ul class="uk-slideshow">
        <li></li>
        <li></li>
    </ul>
    <a href="" data-uk-slideshow-item="previous"></a>
    <a href="" data-uk-slideshow-item="next"></a>
</div>

滑动导航和点导航

幻灯片组件的灵活性使您可以使用任何其他 UIkit 组件来浏览项目。 例如，滑动导航 和 点导航 可以用来设置幻灯片导航的样式，如下所示。

示例

标记

<div class="uk-slidenav-position" data-uk-slideshow>
    <ul class="uk-slideshow">
        <li></li>
        <li></li>
    </ul>
    <a href="" class="uk-slidenav uk-slidenav-contrast uk-slidenav-previous" data-uk-slideshow-item="previous"></a>
    <a href="" class="uk-slidenav uk-slidenav-contrast uk-slidenav-next" data-uk-slideshow-item="next"></a>
    <ul class="uk-dotnav uk-dotnav-contrast uk-position-bottom uk-flex-center">
        <li data-uk-slideshow-item="0"><a href=""></a></li>
        <li data-uk-slideshow-item="1"><a href=""></a></li>
    </ul>
</div>

过渡

幻灯片组件允许您在项目之间切换时向项目添加不同的动画。 您所需要做的就是将 animation 参数添加到数据属性，并定义要应用的动画。 请查看下表，了解所提供动画的概述。

要应用这些更高级的过渡效果，需要在文档头部包含 slideshow-fx.js 文件。

示例

• 滚动

  • 
  • 
  • 

• 缩放

  • 
  • 
  • 

• 滑动

  • 
  • 
  • 

• 切片向下

  • 
  • 
  • 

• 切片向上

  • 
  • 
  • 

• 切片上下

  • 
  • 
  • 

• 折叠

  • 
  • 
  • 

• 拼图

  • 
  • 
  • 

• 方块

  • 
  • 
  • 

• 反向方块

  • 
  • 
  • 

标记

<ul class="uk-slideshow" data-uk-slideshow="{animation: 'random-fx'}">...</ul>

肯·伯恩斯效果

肯·伯恩斯效果也可以应用于幻灯片项目。只需将 {kenburns:true} 选项添加到数据属性。 此效果也可以应用于视频。

示例

标记

<ul class="uk-slideshow" data-uk-slideshow="{kenburns:true}">...</ul>

<ul class="uk-slideshow" data-uk-slideshow="{kenburns:'30s'}">...</ul>

全屏幻灯片放映

要创建一个拉伸以填充整个视口的全屏幻灯片放映，只需添加 .uk-slideshow-fullscreen 类。

标记

<ul class="uk-slideshow uk-slideshow-fullscreen" data-uk-slideshow>...</ul>

叠加层

您还可以使用不同的叠加层来增强幻灯片放映。只需将 .uk-overlay-panel 添加到列表项内的 <div> 元素。 还要添加 .uk-overlay-background 和 .uk-overlay-fade 来显示背景和过渡。 要在幻灯片激活后切换叠加层，请将 .uk-overlay-active 添加到列表容器。 有关更多选项，请查看 叠加层组件。

示例

标记

<ul class="uk-slideshow uk-overlay-active" data-uk-slideshow>
    <li>
        <img src="" width="" height="" alt="">
        <div class="uk-overlay-panel uk-overlay-background uk-overlay-fade">...</div>
    </li>
</ul>

视频

UIkit 允许您在幻灯片放映中展示视频元素和 Iframes。

示例

标记

<!-- This is a slideshow with a video element -->
<ul class="uk-slideshow">
    <li>
        <video width="" height="" autoplay loop muted controls>
            <source src="" type="">
        </video>
    </li>
</ul>

<!-- This is a slideshow with an Iframe -->
<ul class="uk-slideshow">
    <li>
        <iframe src="" width="" height="" frameborder="0" allowfullscreen></iframe>
    </li>
</ul>

内容

您基本上可以插入任何内容，例如文本或整个网格作为幻灯片项目。

示例

手动初始化元素

var slideshow = UIkit.slideshow(element, { /* options */ });

JavaScript 选项

事件