Question

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

用法

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

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

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

<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 的容器中。

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

<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属性中，并声明你希望使用的动画。查看下面的表格了解咱都提供了哪些动画效果。

Class	描述
fade	淡入
scroll	滚动进入
scale	放大
swipe	滑动进入、滑动离开

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

Class	描述
slice-down	The items slide down in slices.
slice-up	The items slide up in slices.
slice-up-down	The sliced items slide in alterning directions.
fold	The items are folded in.
puzzle	The items are divided in squares that randomly fade in.
boxes	The items are divided in squares that scale in diagonally from the top left corner.
boxes-reverse	The items are divided in squares that scale in diagonally from the bottom right corner.
random-fx	Different animations are applied randomly.

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

Ken Burns 效果

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

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

遮罩

还可以用遮罩来提升幻灯片的效果，为幻灯片列表条目内的 <div> 元素添加 .uk-uk-overlay-panel 类就行。添加 .uk-overlay-background 和 .uk-overlay-fade 带来背景与过渡效果。要实现幻灯片显示时即触发遮罩，添加 .uk-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 允许在幻灯片中放入视频和iframe。

<!-- 带有视频的幻灯片 -->
<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>

内容

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

JavaScript 选项

选项	默认值	描述
animation	'fade'	定义幻灯片之间优先呈现的过渡效果
duration	500	过渡效果持续时间
height	'auto'	幻灯片高度
start	0	定义显示的第一张幻灯片
autoplay	false	是否自动切换幻灯片
pauseOnHover	true	鼠标悬停时是否暂停自动播放
autoplayInterval	7000	定义幻灯片切换的时间跨度
videoautoplay	true	定义是否自动开始播放视频
videomute	true	定义是否静音播放视频
kenburns	false	定义是否启用 Ken Burns 效果
kenburnsanimations	uk-animation-middle-left, uk-animation-top-right, uk-animation-bottom-left, uk-animation-top-center, uk-animation-bottom-right	动画方向
slices	15	定义碎片的数量，如果启用了 "Slice" 过渡效果的话。

事件

名称	参数	描述
show.uk.slideshow	event, next slide, current slide	新的一页显示时触发（动画完成后）
beforeshow.uk.slideshow	event, next slide, current slide	新的一页显示前触发（动画完成前）