UIkit3.x文档

幻灯片

创建包含图像和视频的响应式幻灯片。

幻灯片组件具有完全的响应能力，并支持触摸和滑动导航以及桌面的鼠标拖动。 在幻灯片之间拖动时，动画会粘在您的指尖或鼠标光标处。 当您单击上一个和下一个导航时，它还会加快速度跟上您的速度。 所有动画都是硬件加速，以实现更流畅的性能。

用法

要应用此组件，请添加uk-slideshow 属性到容器元素，并使用.uk-slideshow-items class创建幻灯片列表。

使用Cover 组件中的uk-cover属性在每张幻灯片的背景中添加图像。

<div uk-slideshow>
    <ul class="uk-slideshow-items">
        <li>
            <img src="" alt="" uk-cover>
        </li>
    </ul>
</div>
  • <div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slideshow>

    <ul class="uk-slideshow-items">
        <li>
            <img src="/skin/ukv3/images/photo.jpg" alt="" uk-cover>
        </li>
        <li>
            <img src="/skin/ukv3/images/dark.jpg" alt="" uk-cover>
        </li>
        <li>
            <img src="/skin/ukv3/images/light.jpg" alt="" uk-cover>
        </li>
    </ul>

    <a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slideshow-item="previous"></a>
    <a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slideshow-item="next"></a>

</div>

Note要在幻灯片中延迟加载图像，请查看Image 组件。

动画

默认情况下，幻灯片使用slide 动画。可以将animation 选项设置为使用其他动画。可用的值如下：

Animation Description
slide 幻灯片并排滑入。
fade 幻灯片淡入。
scale 幻灯片按比例放大并淡出。
pull 拉出效果
push 推动效果 
<div uk-slideshow="animation: fade">...</div>
  • Slide
    Fade
    Scale
    Pull
    Push
  • <div class="uk-child-width-1-2@m" uk-grid>
    <div>

        <div class="uk-h3">Slide</div>

        <div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slideshow>

            <ul class="uk-slideshow-items">
                <li>
                    <img src="/skin/ukv3/images/photo.jpg" alt="" uk-cover>
                </li>
                <li>
                    <img src="/skin/ukv3/images/dark.jpg" alt="" uk-cover>
                </li>
                <li>
                    <img src="/skin/ukv3/images/light.jpg" alt="" uk-cover>
                </li>
            </ul>

            <a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slideshow-item="previous"></a>
            <a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slideshow-item="next"></a>

        </div>

    </div>
    <div>

        <div class="uk-h3">Fade</div>

        <div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slideshow="animation: fade">

            <ul class="uk-slideshow-items">
                <li>
                    <img src="/skin/ukv3/images/photo.jpg" alt="" uk-cover>
                </li>
                <li>
                    <img src="/skin/ukv3/images/dark.jpg" alt="" uk-cover>
                </li>
                <li>
                    <img src="/skin/ukv3/images/light.jpg" alt="" uk-cover>
                </li>
            </ul>

            <a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slideshow-item="previous"></a>
            <a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slideshow-item="next"></a>

        </div>

    </div>
    <div>

        <div class="uk-h3">Scale</div>

        <div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slideshow="animation: scale">

            <ul class="uk-slideshow-items">
                <li>
                    <img src="/skin/ukv3/images/photo.jpg" alt="" uk-cover>
                </li>
                <li>
                    <img src="/skin/ukv3/images/dark.jpg" alt="" uk-cover>
                </li>
                <li>
                    <img src="/skin/ukv3/images/light.jpg" alt="" uk-cover>
                </li>
            </ul>

            <a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slideshow-item="previous"></a>
            <a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slideshow-item="next"></a>

        </div>

    </div>
    <div>

        <div class="uk-h3">Pull</div>

        <div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slideshow="animation: pull">

            <ul class="uk-slideshow-items">
                <li>
                    <img src="/skin/ukv3/images/photo.jpg" alt="" uk-cover>
                </li>
                <li>
                    <img src="/skin/ukv3/images/dark.jpg" alt="" uk-cover>
                </li>
                <li>
                    <img src="/skin/ukv3/images/light.jpg" alt="" uk-cover>
                </li>
            </ul>

            <a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slideshow-item="previous"></a>
            <a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slideshow-item="next"></a>

        </div>

    </div>
    <div>

        <div class="uk-h3">Push</div>

        <div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slideshow="animation: push">

            <ul class="uk-slideshow-items">
                <li>
                    <img src="/skin/ukv3/images/photo.jpg" alt="" uk-cover>
                </li>
                <li>
                    <img src="/skin/ukv3/images/dark.jpg" alt="" uk-cover>
                </li>
                <li>
                    <img src="/skin/ukv3/images/light.jpg" alt="" uk-cover>
                </li>
            </ul>

            <a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slideshow-item="previous"></a>
            <a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slideshow-item="next"></a>

        </div>

    </div>
</div>

自动播放

要激活自动播放，只需将autoplay: true 选项添加到属性中。您还可以使用autoplay-interval: 6000设置幻灯片切换的时间间隔（以毫秒为单位）。要在鼠标悬停到幻灯片上时暂停自动播放，请使用pause-on-hover: true。 

<div uk-slideshow="autoplay: true">...</div>

循环滚动

无限滚动默认启用，要禁用此行为，只需将finite: true 选项添加到属性。

<div uk-slideshow="finite: true">...</div>

比例

幻灯片始终占据父容器的整个宽度。高度根据定义的比率进行调整。默认比例为16:9，如果要修改它只需将ratio项添加到属性。建议使用与背景图像相同的比率。比如直接使用图片的宽度和高度，例如1600:1200。 

<div uk-slideshow="ratio: 7:3">...</div>
  • <div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slideshow="ratio: 7:3; animation: push">

    <ul class="uk-slideshow-items">
        <li>
            <img src="/skin/ukv3/images/photo.jpg" alt="" uk-cover>
        </li>
        <li>
            <img src="/skin/ukv3/images/dark.jpg" alt="" uk-cover>
        </li>
        <li>
            <img src="/skin/ukv3/images/light.jpg" alt="" uk-cover>
        </li>
    </ul>

    <a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slideshow-item="previous"></a>
    <a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slideshow-item="next"></a>

</div>

最小/最大高度

幻灯片默认高度根据您定义的宽高比例来决定，可以使用min-height and max-height 选项来设置最小高度或最大高度。 

<div uk-slideshow="min-height: 300; max-height: 600">...</div>
  • <div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slideshow="min-height: 300; max-height: 600; animation: push">

    <ul class="uk-slideshow-items">
        <li>
            <img src="/skin/ukv3/images/photo.jpg" alt="" uk-cover>
        </li>
        <li>
            <img src="/skin/ukv3/images/dark.jpg" alt="" uk-cover>
        </li>
        <li>
            <img src="/skin/ukv3/images/light.jpg" alt="" uk-cover>
        </li>
    </ul>

    <a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slideshow-item="previous"></a>
    <a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slideshow-item="next"></a>

</div>

视口高度

添加Height 组件中的uk-height-viewport 属性到幻灯片项列表中，将拉伸高度填充整个视口。可以设置min-height 选项来定义最小高度。

<div uk-slideshow="ratio: false">
    <ul class="uk-slideshow-items" uk-height-viewport="min-height: 300">...</ul>
</div>
  • <div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slideshow="ratio: false">

    <ul class="uk-slideshow-items" uk-height-viewport="offset-top: true; offset-bottom: 30">
        <li>
            <img src="/skin/ukv3/images/photo.jpg" alt="" uk-cover>
        </li>
        <li>
            <img src="/skin/ukv3/images/dark.jpg" alt="" uk-cover>
        </li>
        <li>
            <img src="/skin/ukv3/images/light.jpg" alt="" uk-cover>
        </li>
    </ul>

    <a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slideshow-item="previous"></a>
    <a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slideshow-item="next"></a>

</div>

Note 这个示例设置为视口高度的70％。

要浏览幻灯片，只需使用uk-slideshow-item 属性。要定位到特定的幻灯片，请将每个导航项的属性设置为相应幻灯片放映项的索引号。具有uk-slideshow-item 属性的元素必须位于 uk-slideshow 容器中。将属性设置为next 和 previous 将切换到相邻的幻灯片。 

<div uk-slideshow>

    <ul class="uk-slideshow-items">...</ul>

    <a href="#" uk-slideshow-item="previous">...</a>
    <a href="#" uk-slideshow-item="next">...</a>

    <ul>
        <li uk-slideshow-item="0"><a href="#">...</a></li>
        <li uk-slideshow-item="1"><a href="#">...</a></li>
        <li uk-slideshow-item="2"><a href="#">...</a></li>
    </ul>

</div>

幻灯片组件的灵活性使您可以使用任何其他UIkit组件来浏览项目。例如可以使用Slidenav,、Dotnav 和 Thumbnav 组件设置幻灯片放映导航的样式。

如果导航项中没有特定的项目内容，那么也可以添加.uk-slideshow-nav class，而不是手动添加导航项。它将使用 <li><a href="#"></a></li> 作为标记自动生成项目。使用Dotnav时，这是简便的实用方式。 

<div uk-slideshow>

    <ul class="uk-slideshow-items">...</ul>

    <ul class="uk-slideshow-nav uk-dotnav"></ul>

</div>
    •  
    •  
    •  
  • <div uk-slideshow="animation: push">

    <div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1">

        <ul class="uk-slideshow-items">
            <li>
                <img src="/skin/ukv3/images/photo.jpg" alt="" uk-cover>
            </li>
            <li>
                <img src="/skin/ukv3/images/dark.jpg" alt="" uk-cover>
            </li>
            <li>
                <img src="/skin/ukv3/images/light.jpg" alt="" uk-cover>
            </li>
        </ul>

        <a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slideshow-item="previous"></a>
        <a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slideshow-item="next"></a>

    </div>

    <ul class="uk-slideshow-nav uk-dotnav uk-flex-center uk-margin"></ul>

</div>

Note 为了更好地显示遮罩导航，请添加Inverse 组件中的.uk-light 或 .uk-dark class。

视频

幻灯片内容元素不仅限于图像。可以使用Cover 组件中的uk-cover 属性将其他媒体（例如视频）放置在幻灯片的背景中。视频将被静音并且自动播放。视频不可见时将暂停，再次可见时继续播放。

<div uk-slideshow>
    <ul class="uk-slideshow-items">
        <li>
            <video src="" autoplay loop muted playsinline uk-cover></video>
        </li>
        <li>
            <iframe src="" frameborder="0" uk-cover></iframe>
        </li>
    </ul>
</div>
  • <div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slideshow="animation: push">

    <ul class="uk-slideshow-items">
        <li>
            <img src="/skin/ukv3/images/photo.jpg" alt="" uk-cover>
        </li>
        <li>
            <video src="https://yootheme.com/site/images/media/yootheme-pro.mp4" autoplay loop muted playsinline uk-cover></video>
        </li>
        <li>
            <iframe src="https://www.youtube-nocookie.com/embed/c2pz2mlSfXA?autoplay=1&amp;controls=0&amp;showinfo=0&amp;rel=0&amp;loop=1&amp;modestbranding=1&amp;wmode=transparent&amp;playsinline=1" width="1920" height="1080" frameborder="0" allowfullscreen uk-cover></iframe>
        </li>
    </ul>

    <a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slideshow-item="previous"></a>
    <a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slideshow-item="next"></a>

</div>

Ken Burns 效果

要添加简单的Ken Burns效果，请用div 包裹图片并为div添加.uk-position-cover 和 .uk-animation-kenburns classe。您还可以应用Utility 组件中的 .uk-animation-reverse 或 .uk-transform-origin-* classe之一来修改效果。 

<div uk-slideshow>
    <ul class="uk-slideshow-items">
        <li>
            <div class="uk-position-cover uk-animation-kenburns uk-animation-reverse uk-transform-origin-center-left">
                <img src="" alt="" uk-cover>
            </div>
        </li>
    </ul>
</div>
  • <div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slideshow="animation: push">

    <ul class="uk-slideshow-items">
        <li>
            <div class="uk-position-cover uk-animation-kenburns uk-animation-reverse uk-transform-origin-center-left">
                <img src="/skin/ukv3/images/photo.jpg" alt="" uk-cover>
            </div>
        </li>
        <li>
            <div class="uk-position-cover uk-animation-kenburns uk-animation-reverse uk-transform-origin-top-right">
                <img src="/skin/ukv3/images/dark.jpg" alt="" uk-cover>
            </div>
        </li>
        <li>
            <div class="uk-position-cover uk-animation-kenburns uk-animation-reverse uk-transform-origin-bottom-left">
                <img src="/skin/ukv3/images/light.jpg" alt="" uk-cover>
            </div>
        </li>
    </ul>

    <a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slideshow-item="previous"></a>
    <a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slideshow-item="next"></a>

</div>

内容遮罩

使用Position 组件添加内容遮罩，它允许您将内容放在幻灯片中的任何位置。

<div uk-slideshow>
    <ul class="uk-slideshow-items">
        <li>
            <img src="" alt="" uk-cover>
            <div class="uk-position-center uk-position-small">

                <!-- The content goes here -->

            </div>
        </li>
    </ul>
</div>

Note T若要调整内容以更好地显示每个图片，请添加Inverse 组件中的 .uk-light 或 .uk-dark class ，或使用 Overlay 将任何样式添加到覆盖框中。

    • Center

      Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    • Bottom

      Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    • Overlay Bottom

      Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    • Overlay Bottom Right

      Lorem ipsum dolor sit amet.

  • <div class="uk-position-relative uk-visible-toggle" tabindex="-1" uk-slideshow="animation: push">

    <ul class="uk-slideshow-items">
        <li>
            <img src="/skin/ukv3/images/photo.jpg" alt="" uk-cover>
            <div class="uk-position-center uk-position-small uk-text-center uk-light">
                <h2 class="uk-margin-remove">Center</h2>
                <p class="uk-margin-remove">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
        </li>
        <li>
            <img src="/skin/ukv3/images/dark.jpg" alt="" uk-cover>
            <div class="uk-position-bottom uk-position-medium uk-text-center uk-light">
                <h3 class="uk-margin-remove">Bottom</h3>
                <p class="uk-margin-remove">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
        </li>
        <li>
            <img src="/skin/ukv3/images/light.jpg" alt="" uk-cover>
            <div class="uk-overlay uk-overlay-primary uk-position-bottom uk-text-center">
                <h3 class="uk-margin-remove">Overlay Bottom</h3>
                <p class="uk-margin-remove">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
        </li>
        <li>
            <img src="/skin/ukv3/images/dark.jpg" alt="" uk-cover>
            <div class="uk-overlay uk-overlay-default uk-position-bottom-right uk-position-small">
                <h3 class="uk-margin-remove">Overlay Bottom Right</h3>
                <p class="uk-margin-remove">Lorem ipsum dolor sit amet.</p>
            </div>
        </li>
    </ul>

    <div class="uk-light">
        <a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slideshow-item="previous"></a>
        <a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slideshow-item="next"></a>
    </div>

</div>

内容视差

添加uk-slideshow-parallax 属性到幻灯片内的任意元素，以使其与幻灯片动画一起设置动画。为要设置动画的每个CSS属性添加一个具有所需动画值的选项。至少定义一个起始值和结束值。可以通过传递两个用逗号分隔的值来完成。

该功能继承自Parallax 组件, 它允许根据幻灯片动画的滚动位置设置CSS属性的动画。看看可以设置动画的 可用属性。

<div uk-slideshow>
    <ul class="uk-slideshow-items">
        <li>
            <img src="" alt="" uk-cover>
            <div class="uk-position-center uk-position-small">

                <div uk-slideshow-parallax="x: 100,-100">

                    <!-- The content goes here -->

                </div>

            </div>
        </li>
    </ul>
</div>

在上面的例子中，当幻灯片移入时，内容将从100 开始以动画方式移动至0。当幻灯片再次开始向外移动出去时，内容将继续移动到--100。这是因为起始值和结束值具有相同的距离。对于不同的距离，需要设置三个值Start （滑入动画）、 Middle （滑入居中）、 End （滑出动画）。

<div uk-slideshow-parallax="x: 300,0,-100">...</div>

下面示例定义了不同的输入和输出动画。幻灯片从100 移动到 0，不透明度从1 变为 0。 

<div uk-slideshow-parallax="x: 100,0,0; opacity: 1,1,0">...</div>

    • Heading

      Lorem ipsum dolor sit amet.

    • Heading

      Lorem ipsum dolor sit amet.

    • Heading

      Lorem ipsum dolor sit amet.

  • <div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slideshow="animation: push">

    <ul class="uk-slideshow-items">
        <li>
            <img src="/skin/ukv3/images/photo.jpg" alt="" uk-cover>
            <div class="uk-position-center uk-position-small uk-text-center">
                <h2 uk-slideshow-parallax="x: 100,-100">Heading</h2>
                <p uk-slideshow-parallax="x: 200,-200">Lorem ipsum dolor sit amet.</p>
            </div>
        </li>
        <li>
            <img src="/skin/ukv3/images/dark.jpg" alt="" uk-cover>
            <div class="uk-position-center uk-position-small uk-text-center">
                <h2 uk-slideshow-parallax="x: 100,-100">Heading</h2>
                <p uk-slideshow-parallax="x: 200,-200">Lorem ipsum dolor sit amet.</p>
            </div>
        </li>
        <li>
            <img src="/skin/ukv3/images/light.jpg" alt="" uk-cover>
            <div class="uk-position-center uk-position-small uk-text-center">
                <h2 uk-slideshow-parallax="y: -50,0,0; opacity: 1,1,0">Heading</h2>
                <p uk-slideshow-parallax="y: 50,0,0; opacity: 1,1,0">Lorem ipsum dolor sit amet.</p>
            </div>
        </li>
    </ul>

    <a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slideshow-item="previous"></a>
    <a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slideshow-item="next"></a>

</div>

进阶效果

视差属性可用于向幻灯片动画添加其他效果。在下面的示例中，push 动画通过在图像滑出时变暗并比例缩小图片来扩展动画效果。

<div uk-slideshow="animation: push">
    <ul class="uk-slideshow-items">
        <li>
            <div class="uk-position-cover" uk-slideshow-parallax="scale: 1.2,1.2,1">
                <img src="" alt="" uk-cover>
            </div>
            <div class="uk-position-cover" uk-slideshow-parallax="opacity: 0,0,0.2; backgroundColor: #000,#000"></div>
        </li>
    </ul>
</div>
    •  

      Heading

      Lorem ipsum dolor sit amet.

    •  

      Heading

      Lorem ipsum dolor sit amet.

    •  

      Heading

      Lorem ipsum dolor sit amet.

  • <div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slideshow="animation: push">

    <ul class="uk-slideshow-items">
        <li>
            <div class="uk-position-cover" uk-slideshow-parallax="scale: 1.2,1.2,1">
                <img src="/skin/ukv3/images/photo.jpg" alt="" uk-cover>
            </div>
            <div class="uk-position-cover" uk-slideshow-parallax="opacity: 0,0,0.2; backgroundColor: #000,#000"></div>
            <div class="uk-position-center uk-position-medium uk-text-center">
                <div uk-slideshow-parallax="scale: 1,1,0.8">
                    <h2 uk-slideshow-parallax="x: 200,0,0">Heading</h2>
                    <p uk-slideshow-parallax="x: 400,0,0;">Lorem ipsum dolor sit amet.</p>
                </div>
            </div>
        </li>
        <li>
            <div class="uk-position-cover" uk-slideshow-parallax="scale: 1.2,1.2,1">
                <img src="/skin/ukv3/images/dark.jpg" alt="" uk-cover>
            </div>
            <div class="uk-position-cover" uk-slideshow-parallax="opacity: 0,0,0.2; backgroundColor: #000,#000"></div>
            <div class="uk-position-center uk-position-medium uk-text-center">
                <div uk-slideshow-parallax="scale: 1,1,0.8">
                    <h2 uk-slideshow-parallax="x: 200,0,0">Heading</h2>
                    <p uk-slideshow-parallax="x: 400,0,0;">Lorem ipsum dolor sit amet.</p>
                </div>
            </div>
        </li>
        <li>
            <div class="uk-position-cover" uk-slideshow-parallax="scale: 1.2,1.2,1">
                <img src="/skin/ukv3/images/light.jpg" alt="" uk-cover>
            </div>
            <div class="uk-position-cover" uk-slideshow-parallax="opacity: 0,0,0.2; backgroundColor: #000,#000"></div>
            <div class="uk-position-center uk-position-medium uk-text-center">
                <div uk-slideshow-parallax="scale: 1,1,0.8">
                    <h2 uk-slideshow-parallax="x: 200,0,0">Heading</h2>
                    <p uk-slideshow-parallax="x: 400,0,0;">Lorem ipsum dolor sit amet.</p>
                </div>
            </div>
        </li>
    </ul>

    <a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slideshow-item="previous"></a>
    <a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slideshow-item="next"></a>

</div>

内容缓动动画

幻灯片中会自动触发Transition 组件 中的过渡效果class。 与视差效果相反的是，过渡不会附加到幻灯片动画同时执行，并在幻灯片动画结束后再单独执行。

<div uk-slideshow>
    <ul class="uk-slideshow-items">
        <li>
            <img src="" alt="" uk-cover>
            <div class="uk-position-bottom uk-position-small">

                <div class="uk-transition-slide-bottom">

                    <!-- The content goes here -->

                </div>

            </div>
        </li>
    </ul>
</div>

内容转换通常和Overlay 组件一起使用构建构建幻灯片的经典标题。

    • Bottom

      Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    • Bottom

      Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    • Left

      Lorem ipsum dolor sit amet, consectetur adipiscing elit.

  • <div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slideshow="animation: fade">

    <ul class="uk-slideshow-items">
        <li>
            <img src="/skin/ukv3/images/photo.jpg" alt="" uk-cover>
            <div class="uk-overlay uk-overlay-primary uk-position-bottom uk-text-center uk-transition-slide-bottom">
                <h3 class="uk-margin-remove">Bottom</h3>
                <p class="uk-margin-remove">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
        </li>
        <li>
            <img src="/skin/ukv3/images/dark.jpg" alt="" uk-cover>
            <div class="uk-overlay uk-overlay-primary uk-position-bottom uk-text-center uk-transition-slide-bottom">
                <h3 class="uk-margin-remove">Bottom</h3>
                <p class="uk-margin-remove">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
        </li>
        <li>
            <img src="/skin/ukv3/images/light.jpg" alt="" uk-cover>
            <div class="uk-overlay uk-overlay-primary uk-position-right uk-text-center uk-transition-slide-right uk-width-medium">
                <h3 class="uk-margin-remove">Left</h3>
                <p class="uk-margin-remove">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
        </li>
    </ul>

    <a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slideshow-item="previous"></a>
    <a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slideshow-item="next"></a>

</div>

组件选项

以下选项中的任何一个都可以应用于组件属性。用分号分隔多个选项。了解更多

Slideshow

Option Value Default Description
animation String slide 幻灯片动画模式：slide, fade, scale, pull 或 push.
autoplay Boolean false 幻灯片自动播放。
autoplay-interval Number 7000 自动播放模式下幻灯片切换的延迟时间。
draggable Boolean true 启用指针拖动。
easing String ease 动画缓动（CSS计时功能或三次贝塞尔曲线）。
finite Boolean false 禁用循环滑动。
pause-on-hover Boolean true 鼠标悬停时暂停自动播放模式。
index Number 0 要显示的幻灯片项目。从0开始的索引。
velocity Number 1 动画速度（像素/毫秒）。
ratio Boolean, String 16:9 宽高比例(false 防止高度调整)
min-height Boolean, Number false 最小高度。
max-height Boolean, Number false 最大高度。

JavaScript

了解更多关于JavaScript 组件的内容。

初始化

UIkit.slideshow(element, options);

事件

将在附加了此组件的元素上触发以下事件：

Name Description
beforeitemshow 在显示项目之前触发。
itemshow 显示一个项目后触发。
itemshown 项目的显示动画完成后触发。
beforeitemhide 隐藏项目前触发。
itemhide 项目的隐藏动画开始后触发。
itemhidden 项目的隐藏动画结束后触发。

方法

以下方法可用于该组件：

Show

UIkit.slideshow(element).show(index);

显示幻灯片项目

startAutoplay

UIkit.slideshow(element).startAutoplay();

启动自动播放

stopAutoplay 

UIkit.slideshow(element).stopAutoplay();

停止自动播放。