# 幻灯片/Slideshow 创建可以全屏模式和遮罩效果的，具有炫酷过渡效果的响应式图片或视频幻灯片。 ## 用法 要创建幻灯片，只需要添加 `.uk-slideshow` 类到一个 `&lt;ul&gt;` 元素中，并将你的图片放入列表条目内。为了加载必要的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组件进行幻灯片的导航。比如[滑动导航](slidenav.html)和[圆点导航](dotnav.html)可以用来像下面这样作为幻灯片的导航。 #### 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属性中，并声明你希望使用的动画。查看下面的表格了解咱都提供了哪些动画效果。 | 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. | ### 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> ``` * * * ## 遮罩 还可以用遮罩来提升幻灯片的效果，为幻灯片列表条目内的 `&lt;div&gt;` 元素添加 `.uk-uk-overlay-panel` 类就行。添加 `.uk-overlay-background` 和 `.uk-overlay-fade` 带来背景与过渡效果。要实现幻灯片显示时即触发遮罩，添加 `.uk-uk-overlay-active` 到列表容器即可。更多选项查看 [遮罩组件](overlay.html). ### 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 <video width="600" height="400" autoplay="" loop="" muted="" controls=""><source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4?test1" type="video/mp4"> <source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.ogv?test2" type="video/ogg"></video> ### 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 选项 | 选项 | 默认值 | 描述 | | --- | --- | --- | | `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 | 新的一页显示前触发（动画完成前） |