幻灯片/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属性中,并声明你希望使用的动画。查看下面的表格了解咱都提供了哪些动画效果。
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. |
Example
-
Scroll
-
Scale
-
Swipe
-
Slice Down
-
Slice Up
-
Slice Up Down
-
Fold
-
Puzzle
-
Boxes
-
Boxes Reverse
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 选项
选项 | 默认值 | 描述 |
---|---|---|
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 | 新的一页显示前触发(动画完成前) |