幻灯片/Slideshow

创建可以全屏模式和遮罩效果的，具有炫酷过渡效果的响应式图片或视频幻灯片。

用法

要创建幻灯片，只需要添加 .uk-slideshow 类到一个 <ul> 元素中，并将你的图片放入列表条目内。为了加载必要的JavaScript，还需要添加 data-uk-slideshow 属性。

注意 使用此组件需要额外添加 slideshow.css 文件，在css/components文件夹中。此组件需要额外添加 slideshow.js 文件，在js/components文件夹中。

Example

注意 如果需要自动播放，为data属性添加 {autoplay:true} 选项就行了。

Markup

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

导航/Navigations

在幻灯片中进行导航，使用 data-uk-slideshow-item 属性就行。为了能指向幻灯片，你必须为每个导航单元设置data属性指向每个幻灯片单元的序号。带有 data-uk-slideshow-item 属性的元素需要被放置在带有 data-uk-slideshow 的容器中。

Markup

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

将data属性设置为 next and previous 就能进行相邻幻灯片之间的切换。像这样：

Markup

<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组件进行幻灯片的导航。比如滑动导航和圆点导航可以用来像下面这样作为幻灯片的导航。

Example

Markup

<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-text-center">
        <li data-uk-slideshow-item="0"><a href=""></a></li>
        <li data-uk-slideshow-item="1"><a href=""></a></li>
    </ul>
</div>

过渡形式

幻灯片组件允许添加不同的幻灯片切换效果。你需要做的就是将 animation 参数添加到data属性中，并声明你希望使用的动画。查看下面的表格了解咱都提供了哪些动画效果。

要使用下面这些增强的过渡效果，必须在文档head中引入 slideshow-fx.js 。下面表格不翻译了，看后面的演示吧。

Markup

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

Ken Burns 效果

炫酷的 Ken Burns 效果也能用在幻灯片里。只需要添加 {kenburns:true} 选项到data属性中就行。这个效果还能用在视频上。

Example

Markup

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

自定义动画持续时间:

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

全屏幻灯片

创建填满整个视口的全屏幻灯片，只需要添加一个 .uk-slideshow-fullscreen 类。

Markup

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

遮罩

还可以用遮罩来提升幻灯片的效果，为幻灯片列表条目内的 <div> 元素添加 .uk-uk-overlay-panel 类就行。添加 .uk-overlay-background 和 .uk-overlay-fade 带来背景与过渡效果。要实现幻灯片显示时即触发遮罩，添加 .uk-uk-overlay-active 到列表容器即可。更多选项查看 遮罩组件.

Example

Markup

<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 允许在幻灯片中放入视频和iframe。

Example

Markup

<!-- 带有视频的幻灯片 -->
<ul class="uk-slideshow">
    <li>
        <video width="" height="" autoplay loop muted controls>
            <source src="" type="">
        </video>
    </li>
</ul>

<!-- 带有Iframe的幻灯片 -->
<ul class="uk-slideshow">
    <li>
        <iframe src="" width="" height="" frameborder="0" allowfullscreen></iframe>
    </li>
</ul>

内容

基本上可以在幻灯片内插入任何内容，比如文本甚至整个网格。

Example

JavaScript 选项

uk-animation-bottom-left, uk-animation-top-center, uk-animation-bottom-right | 动画方向 | | slices | 15 | 定义碎片的数量，如果启用了 "Slice" 过渡效果的话。 |

事件