幻灯片/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>

在幻灯片中进行导航,使用 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

  • Overlay

    Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
    sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.

  • Overlay Top

    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.

  • Overlay Bottom

    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.

  • Overlay Left

    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.

  • Overlay Right

    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.

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

  • Headline 1

    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

  • Headline 2

    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.


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 新的一页显示前触发(动画完成前)