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 容器中。将属性设置为nextprevious 将切换到相邻的幻灯片。

<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,、DotnavThumbnav 组件设置幻灯片放映导航的样式。

如果导航项中没有特定的项目内容,那么也可以添加.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, pullpush.
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();

停止自动播放。