跳到主要内容

文档

Slider

创建响应式的轮播滑块。

滑块（Slider）组件完全响应式，支持触摸滑动导航，也支持桌面端的鼠标拖拽。连续点击 `previous and next navigation 时，它甚至会加速以跟上你的操作节奏。所有动画都经过硬件加速，以获得更平滑的性能。

用法

要使用这个组件，为容器元素添加 uk-slider 属性，并用 .uk-slider-items 类创建幻灯片列表。为每个项目添加图片或任意其他内容。

要定义滑块项目的宽度，可使用 Width 组件。既可以给所有滑块项目应用 .uk-child-width-* 类来统一定义宽度，也可以用 .uk-width-* 类为每个列表项单独设置宽度。如果没有设置具体宽度，每个项目的宽度取决于内容自身的尺寸。

<div uk-slider>
    <div class="uk-slider-items uk-child-width-1-3@s uk-child-width-1-4@">
        <div>
            <img src="" width="" height="" alt="">
        </div>
    </div>
</div>

1

2

3

4

5

6

7

8

9

10

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

    <div class="uk-slider-items uk-child-width-1-2 uk-child-width-1-3@s uk-child-width-1-4@m">
        <div>
            <img src="images/slider1.jpg" width="400" height="600" alt="">
            <div class="uk-position-center uk-panel"><h1>1</h1></div>
        </div>
        <div>
            <img src="images/slider2.jpg" width="400" height="600" alt="">
            <div class="uk-position-center uk-panel"><h1>2</h1></div>
        </div>
        <div>
            <img src="images/slider3.jpg" width="400" height="600" alt="">
            <div class="uk-position-center uk-panel"><h1>3</h1></div>
        </div>
        <div>
            <img src="images/slider4.jpg" width="400" height="600" alt="">
            <div class="uk-position-center uk-panel"><h1>4</h1></div>
        </div>
        <div>
            <img src="images/slider5.jpg" width="400" height="600" alt="">
            <div class="uk-position-center uk-panel"><h1>5</h1></div>
        </div>
        <div>
            <img src="images/slider1.jpg" width="400" height="600" alt="">
            <div class="uk-position-center uk-panel"><h1>6</h1></div>
        </div>
        <div>
            <img src="images/slider2.jpg" width="400" height="600" alt="">
            <div class="uk-position-center uk-panel"><h1>7</h1></div>
        </div>
        <div>
            <img src="images/slider3.jpg" width="400" height="600" alt="">
            <div class="uk-position-center uk-panel"><h1>8</h1></div>
        </div>
        <div>
            <img src="images/slider4.jpg" width="400" height="600" alt="">
            <div class="uk-position-center uk-panel"><h1>9</h1></div>
        </div>
        <div>
            <img src="images/slider5.jpg" width="400" height="600" alt="">
            <div class="uk-position-center uk-panel"><h1>10</h1></div>
        </div>
    </div>

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

</div>

注意 要对幻灯片中的图片进行懒加载，使用 loading="lazy" 属性。Slider 会自动从相邻幻灯片的图片上移除该属性。

容器

.uk-slider-container 类负责裁剪滑块项目。默认情况下，uk-slider 属性会把该类应用到同一个元素上。你也可以手动把该类添加到滑块内部的任意元素上，这样就可以控制由哪个容器来裁剪滑块项目。

<div uk-slider>

    <div class="uk-slider-container">
        <div class="uk-slider-items uk-child-width-1-4">
            <div>
                <img src="" width="" height="" alt="">
            </div>
        </div>
    </div>

</div>

由于滑块效果需要一个裁剪容器，内容项的盒阴影也会一并被裁剪。要加宽容器以避免盒阴影被裁剪，添加 .uk-slider-container-offset 类。

间距

要为滑块项目设置间距，可使用 Grid 组件，并为滑块添加 .uk-grid 类。元素之间随后会按栅格间距排布。你可以使用 .uk-grid-small 这类修饰符来改变间距。

<div uk-slider>
    <div class="uk-slider-items uk-child-width-1-2@s uk-child-width-1-3@m uk-grid">
        <div>
            <img src="" width="" height="" alt="">
        </div>
    </div>
</div>

1

2

3

4

5

6

7

8

9

10

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

    <div class="uk-slider-items uk-child-width-1-2 uk-child-width-1-3@m uk-grid">
        <div>
            <div class="uk-panel">
                <img src="images/slider1.jpg" width="400" height="600" alt="">
                <div class="uk-position-center uk-panel"><h1>1</h1></div>
            </div>
        </div>
        <div>
            <div class="uk-panel">
                <img src="images/slider2.jpg" width="400" height="600" alt="">
                <div class="uk-position-center uk-panel"><h1>2</h1></div>
            </div>
        </div>
        <div>
            <div class="uk-panel">
                <img src="images/slider3.jpg" width="400" height="600" alt="">
                <div class="uk-position-center uk-panel"><h1>3</h1></div>
            </div>
        </div>
        <div>
            <div class="uk-panel">
                <img src="images/slider4.jpg" width="400" height="600" alt="">
                <div class="uk-position-center uk-panel"><h1>4</h1></div>
            </div>
        </div>
        <div>
            <div class="uk-panel">
                <img src="images/slider5.jpg" width="400" height="600" alt="">
                <div class="uk-position-center uk-panel"><h1>5</h1></div>
            </div>
        </div>
        <div>
            <div class="uk-panel">
                <img src="images/slider1.jpg" width="400" height="600" alt="">
                <div class="uk-position-center uk-panel"><h1>6</h1></div>
            </div>
        </div>
        <div>
            <div class="uk-panel">
                <img src="images/slider2.jpg" width="400" height="600" alt="">
                <div class="uk-position-center uk-panel"><h1>7</h1></div>
            </div>
        </div>
        <div>
            <div class="uk-panel">
                <img src="images/slider3.jpg" width="400" height="600" alt="">
                <div class="uk-position-center uk-panel"><h1>8</h1></div>
            </div>
        </div>
        <div>
            <div class="uk-panel">
                <img src="images/slider4.jpg" width="400" height="600" alt="">
                <div class="uk-position-center uk-panel"><h1>9</h1></div>
            </div>
        </div>
        <div>
            <div class="uk-panel">
                <img src="images/slider5.jpg" width="400" height="600" alt="">
                <div class="uk-position-center uk-panel"><h1>10</h1></div>
            </div>
        </div>
    </div>

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

</div>

居中

默认情况下，滑块的项目总是左对齐。要让列表项居中，只需在属性中添加 center: true。

<div uk-slider="center: true">…</div>

1

2

3

4

5

<div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slider="center: true">

    <div class="uk-slider-items uk-grid">
        <div class="uk-width-3-4">
            <div class="uk-panel">
                <img src="images/photo.jpg" width="600" height="400" alt="">
                <div class="uk-position-center uk-panel"><h1>1</h1></div>
            </div>
        </div>
        <div class="uk-width-3-4">
            <div class="uk-panel">
                <img src="images/dark.jpg" width="600" height="400" alt="">
                <div class="uk-position-center uk-panel"><h1>2</h1></div>
            </div>
        </div>
        <div class="uk-width-3-4">
            <div class="uk-panel">
                <img src="images/light.jpg" width="600" height="400" alt="">
                <div class="uk-position-center uk-panel"><h1>3</h1></div>
            </div>
        </div>
        <div class="uk-width-3-4">
            <div class="uk-panel">
                <img src="images/photo2.jpg" width="600" height="400" alt="">
                <div class="uk-position-center uk-panel"><h1>4</h1></div>
            </div>
        </div>
        <div class="uk-width-3-4">
            <div class="uk-panel">
                <img src="images/photo3.jpg" width="600" height="400" alt="">
                <div class="uk-position-center uk-panel"><h1>5</h1></div>
            </div>
        </div>
    </div>

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

</div>

注意 在这个示例中，我们为每个项目添加了 .uk-width-3-4 类，这会让滑块看起来非常接近轮播（Slideshow）。

自动播放

要启用自动播放，只需在属性中添加 autoplay: true 选项。你也可以用 autoplay-interval: 6000 设置切换幻灯片之间的间隔时间（毫秒）。要在悬停滑块时暂停自动播放，使用 pause-on-hover: true。

<div uk-slider="autoplay: true">…</div>

无限滚动

默认情况下，无限滚动是开启的。要禁用这一行为，只需在属性中添加 finite: true 选项。

<div uk-slider="finite: true">…</div>

幻灯片分组

要按整组幻灯片而不是单个项目来循环，只需在属性中添加 sets: true。

<div uk-slider="sets: true">…</div>

1

2

3

4

5

6

7

8

9

10

<div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slider="sets: true">

    <div class="uk-slider-items uk-child-width-1-2 uk-child-width-1-3@m">
        <div>
            <img src="images/slider1.jpg" width="400" height="600" alt="">
            <div class="uk-position-center uk-panel"><h1>1</h1></div>
        </div>
        <div>
            <img src="images/slider2.jpg" width="400" height="600" alt="">
            <div class="uk-position-center uk-panel"><h1>2</h1></div>
        </div>
        <div>
            <img src="images/slider3.jpg" width="400" height="600" alt="">
            <div class="uk-position-center uk-panel"><h1>3</h1></div>
        </div>
        <div>
            <img src="images/slider4.jpg" width="400" height="600" alt="">
            <div class="uk-position-center uk-panel"><h1>4</h1></div>
        </div>
        <div>
            <img src="images/slider5.jpg" width="400" height="600" alt="">
            <div class="uk-position-center uk-panel"><h1>5</h1></div>
        </div>
        <div>
            <img src="images/slider1.jpg" width="400" height="600" alt="">
            <div class="uk-position-center uk-panel"><h1>6</h1></div>
        </div>
        <div>
            <img src="images/slider2.jpg" width="400" height="600" alt="">
            <div class="uk-position-center uk-panel"><h1>7</h1></div>
        </div>
        <div>
            <img src="images/slider3.jpg" width="400" height="600" alt="">
            <div class="uk-position-center uk-panel"><h1>8</h1></div>
        </div>
        <div>
            <img src="images/slider4.jpg" width="400" height="600" alt="">
            <div class="uk-position-center uk-panel"><h1>9</h1></div>
        </div>
        <div>
            <img src="images/slider5.jpg" width="400" height="600" alt="">
            <div class="uk-position-center uk-panel"><h1>10</h1></div>
        </div>
    </div>

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

</div>

导航

要在幻灯片之间导航，只需使用 uk-slider-item 属性。要定位到某张幻灯片，把每个导航项的属性值设为对应滑块项目的索引编号。带 uk-slider-item 属性的元素必须位于 uk-slider 容器内部。把属性值设为 next 和 previous 会切换到相邻的幻灯片。

<div uk-slider>

    <div class="uk-slider-items">…</div>

    <a href uk-slider-item="previous">…</a>
    <a href uk-slider-item="next">…</a>

    <ul>
        <li uk-slider-item="0"><a href>…</a></li>
        <li uk-slider-item="1"><a href>…</a></li>
        <li uk-slider-item="2"><a href>…</a></li>
    </ul>

</div>

Slideshow 组件的灵活性让你可以使用任意其他 UIkit 组件来导航项目。例如，可以用 Slidenav、Dotnav 和 Thumbnav 组件来为幻灯片导航设置样式。

如果导航项中不需要项目专属的内容，也可以添加 .uk-slider-nav 类，而不必手动添加导航项。它会以 <li><a href></a></li> 作为标记自动生成导航项。在使用 Dotnav 时，这是一个很方便的捷径。

<div uk-slider>

    <div class="uk-slider-items">…</div>

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

</div>

1

2

3

4

5

6

7

8

9

10

    <div uk-slider>

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

        <div class="uk-slider-items uk-child-width-1-2 uk-child-width-1-3@s uk-child-width-1-4@m">
            <div>
                <img src="images/slider1.jpg" width="400" height="600" alt="">
                <div class="uk-position-center uk-panel"><h1>1</h1></div>
            </div>
            <div>
                <img src="images/slider2.jpg" width="400" height="600" alt="">
                <div class="uk-position-center uk-panel"><h1>2</h1></div>
            </div>
            <div>
                <img src="images/slider3.jpg" width="400" height="600" alt="">
                <div class="uk-position-center uk-panel"><h1>3</h1></div>
            </div>
            <div>
                <img src="images/slider4.jpg" width="400" height="600" alt="">
                <div class="uk-position-center uk-panel"><h1>4</h1></div>
            </div>
            <div>
                <img src="images/slider5.jpg" width="400" height="600" alt="">
                <div class="uk-position-center uk-panel"><h1>5</h1></div>
            </div>
            <div>
                <img src="images/slider1.jpg" width="400" height="600" alt="">
                <div class="uk-position-center uk-panel"><h1>6</h1></div>
            </div>
            <div>
                <img src="images/slider2.jpg" width="400" height="600" alt="">
                <div class="uk-position-center uk-panel"><h1>7</h1></div>
            </div>
            <div>
                <img src="images/slider3.jpg" width="400" height="600" alt="">
                <div class="uk-position-center uk-panel"><h1>8</h1></div>
            </div>
            <div>
                <img src="images/slider4.jpg" width="400" height="600" alt="">
                <div class="uk-position-center uk-panel"><h1>9</h1></div>
            </div>
            <div>
                <img src="images/slider5.jpg" width="400" height="600" alt="">
                <div class="uk-position-center uk-panel"><h1>10</h1></div>
            </div>
        </div>

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

    </div>

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

</div>

    注意 为了让叠加的导航更清晰可见，可添加 Inverse 组件 中的 .uk-light 或 .uk-dark 类。

    外置导航

    要把导航放在滑块外部，请把 Position 组件 中的 .uk-position-center-left-out 和 .uk-position-center-right-out 类分别添加到 previous 和 next 导航上。请确保负责裁剪滑块项目的 .uk-slider-container 类不会把导航也一并裁剪。

    <div uk-slider>

    <div class="uk-position-relative">

        <div class="uk-slider-container">
            <div class="uk-slider-items">…</div>
        </div>

        <a class="uk-position-center-left-out" href uk-slider-item="previous">…</a>
        <a class="uk-position-center-right-out" href uk-slider-item="next">…</a>

    </div>

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

</div>

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

      <div uk-slider>

    <div class="uk-position-relative">

        <div class="uk-slider-container uk-light">
            <div class="uk-slider-items uk-child-width-1-2 uk-child-width-1-3@s uk-child-width-1-4@m">
                <div>
                    <img src="images/slider1.jpg" width="400" height="600" alt="">
                    <div class="uk-position-center uk-panel"><h1>1</h1></div>
                </div>
                <div>
                    <img src="images/slider2.jpg" width="400" height="600" alt="">
                    <div class="uk-position-center uk-panel"><h1>2</h1></div>
                </div>
                <div>
                    <img src="images/slider3.jpg" width="400" height="600" alt="">
                    <div class="uk-position-center uk-panel"><h1>3</h1></div>
                </div>
                <div>
                    <img src="images/slider4.jpg" width="400" height="600" alt="">
                    <div class="uk-position-center uk-panel"><h1>4</h1></div>
                </div>
                <div>
                    <img src="images/slider5.jpg" width="400" height="600" alt="">
                    <div class="uk-position-center uk-panel"><h1>5</h1></div>
                </div>
                <div>
                    <img src="images/slider1.jpg" width="400" height="600" alt="">
                    <div class="uk-position-center uk-panel"><h1>6</h1></div>
                </div>
                <div>
                    <img src="images/slider2.jpg" width="400" height="600" alt="">
                    <div class="uk-position-center uk-panel"><h1>7</h1></div>
                </div>
                <div>
                    <img src="images/slider3.jpg" width="400" height="600" alt="">
                    <div class="uk-position-center uk-panel"><h1>8</h1></div>
                </div>
                <div>
                    <img src="images/slider4.jpg" width="400" height="600" alt="">
                    <div class="uk-position-center uk-panel"><h1>9</h1></div>
                </div>
                <div>
                    <img src="images/slider5.jpg" width="400" height="600" alt="">
                    <div class="uk-position-center uk-panel"><h1>10</h1></div>
                </div>
            </div>
        </div>

        <div class="uk-hidden@s uk-light">
            <a class="uk-position-center-left uk-position-small" href uk-slidenav-previous uk-slider-item="previous"></a>
            <a class="uk-position-center-right uk-position-small" href uk-slidenav-next uk-slider-item="next"></a>
        </div>

        <div class="uk-visible@s">
            <a class="uk-position-center-left-out uk-position-small" href uk-slidenav-previous uk-slider-item="previous"></a>
            <a class="uk-position-center-right-out uk-position-small" href uk-slidenav-next uk-slider-item="next"></a>
        </div>

    </div>

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

</div>

      视差动画

      除了通过导航控件逐步切换，滑块还可以根据其在视口中的滚动位置使用无级视差动画。只需在属性中添加 parallax: true。如果标记中设置了导航，它将不可点击，但仍会获得当前幻灯片的激活状态。

      <div uk-slider="parallax: true">…</div>

      1

      2

      3

      4

      5

      6

      7

      8

      9

      10

        <div uk-slider="parallax: true;">

    <div class="uk-slider-items uk-child-width-1-2 uk-child-width-1-3@s uk-child-width-1-4@m uk-light">
        <div>
            <img src="images/slider1.jpg" width="400" height="600" alt="">
            <div class="uk-position-center uk-panel"><h1>1</h1></div>
        </div>
        <div>
            <img src="images/slider2.jpg" width="400" height="600" alt="">
            <div class="uk-position-center uk-panel"><h1>2</h1></div>
        </div>
        <div>
            <img src="images/slider3.jpg" width="400" height="600" alt="">
            <div class="uk-position-center uk-panel"><h1>3</h1></div>
        </div>
        <div>
            <img src="images/slider4.jpg" width="400" height="600" alt="">
            <div class="uk-position-center uk-panel"><h1>4</h1></div>
        </div>
        <div>
            <img src="images/slider5.jpg" width="400" height="600" alt="">
            <div class="uk-position-center uk-panel"><h1>5</h1></div>
        </div>
        <div>
            <img src="images/slider1.jpg" width="400" height="600" alt="">
            <div class="uk-position-center uk-panel"><h1>6</h1></div>
        </div>
        <div>
            <img src="images/slider2.jpg" width="400" height="600" alt="">
            <div class="uk-position-center uk-panel"><h1>7</h1></div>
        </div>
        <div>
            <img src="images/slider3.jpg" width="400" height="600" alt="">
            <div class="uk-position-center uk-panel"><h1>8</h1></div>
        </div>
        <div>
            <img src="images/slider4.jpg" width="400" height="600" alt="">
            <div class="uk-position-center uk-panel"><h1>9</h1></div>
        </div>
        <div>
            <img src="images/slider5.jpg" width="400" height="600" alt="">
            <div class="uk-position-center uk-panel"><h1>10</h1></div>
        </div>
    </div>

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

</div>

        要调整视差时长，设置 parallax-start 和 parallax-end 选项。parallax-start 选项定义动画何时开始，默认值 0 表示滑块的上边框与视口的下边框相交。end 选项定义动画何时结束，默认值 0 表示滑块的下边框与视口的上边框相交。值可以设置为任意尺寸单位，即 vh、% 和 px。其中 % 单位相对于滑块的高度。这两个选项都支持基本数学运算符 + 和 -。

        <div uk-slider="parallax: true; parallax-start: 100%; parallax-end: 100%;">…</div>

        1

        2

        3

        4

        5

        6

        7

        8

        9

        10

          <div uk-slider="parallax: true; parallax-start: 100%; parallax-end: 100%;">

    <div class="uk-slider-items uk-child-width-1-2 uk-child-width-1-3@s uk-child-width-1-4@m uk-light">
        <div>
            <img src="images/slider1.jpg" width="400" height="600" alt="">
            <div class="uk-position-center uk-panel"><h1>1</h1></div>
        </div>
        <div>
            <img src="images/slider2.jpg" width="400" height="600" alt="">
            <div class="uk-position-center uk-panel"><h1>2</h1></div>
        </div>
        <div>
            <img src="images/slider3.jpg" width="400" height="600" alt="">
            <div class="uk-position-center uk-panel"><h1>3</h1></div>
        </div>
        <div>
            <img src="images/slider4.jpg" width="400" height="600" alt="">
            <div class="uk-position-center uk-panel"><h1>4</h1></div>
        </div>
        <div>
            <img src="images/slider5.jpg" width="400" height="600" alt="">
            <div class="uk-position-center uk-panel"><h1>5</h1></div>
        </div>
        <div>
            <img src="images/slider1.jpg" width="400" height="600" alt="">
            <div class="uk-position-center uk-panel"><h1>6</h1></div>
        </div>
        <div>
            <img src="images/slider2.jpg" width="400" height="600" alt="">
            <div class="uk-position-center uk-panel"><h1>7</h1></div>
        </div>
        <div>
            <img src="images/slider3.jpg" width="400" height="600" alt="">
            <div class="uk-position-center uk-panel"><h1>8</h1></div>
        </div>
        <div>
            <img src="images/slider4.jpg" width="400" height="600" alt="">
            <div class="uk-position-center uk-panel"><h1>9</h1></div>
        </div>
        <div>
            <img src="images/slider5.jpg" width="400" height="600" alt="">
            <div class="uk-position-center uk-panel"><h1>10</h1></div>
        </div>
    </div>

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

</div>

          视口高度

          把 Height 组件 中的 uk-height-viewport 属性添加到滑块项目列表上，会把 <ul> 和 <li> 元素的高度拉伸至填满整个视口高度。由于此时宽度和高度不再由项目内容决定，你必须为内容使用绝对定位。

          可使用 Cover 组件，让图片覆盖整个项目区域并被裁剪。Grid 组件 中的 .uk-grid-match 类会匹配每个项目直接子元素的高度。这在本例中很有用，因为子元素现在会应用与列表项相同的宽度和高度。

          <div uk-slider>
    <div class="uk-slider-items uk-child-width-1-3@m uk-grid-match" uk-height-viewport="min: 300">
        <div>
            <div class="uk-cover-container">
                <img src="" alt="" uk-cover>
            </div>
        </div>
    </div>
</div>

          1

          2

          3

          4

          5

          <div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slider="center: true">

    <div class="uk-slider-items uk-grid uk-grid-match" uk-height-viewport="offset-top: true; offset-bottom: 30">
        <div class="uk-width-3-4">
            <div class="uk-cover-container">
                <img src="images/photo.jpg" alt="" uk-cover>
                <div class="uk-position-center uk-panel"><h1>1</h1></div>
            </div>
        </div>
        <div class="uk-width-3-4">
            <div class="uk-cover-container">
                <img src="images/dark.jpg" alt="" uk-cover>
                <div class="uk-position-center uk-panel"><h1>2</h1></div>
            </div>
        </div>
        <div class="uk-width-3-4">
            <div class="uk-cover-container">
                <img src="images/light.jpg" alt="" uk-cover>
                <div class="uk-position-center uk-panel"><h1>3</h1></div>
            </div>
        </div>
        <div class="uk-width-3-4">
            <div class="uk-cover-container">
                <img src="images/photo2.jpg" alt="" uk-cover>
                <div class="uk-position-center uk-panel"><h1>4</h1></div>
            </div>
        </div>
        <div class="uk-width-3-4">
            <div class="uk-cover-container">
                <img src="images/photo3.jpg" alt="" uk-cover>
                <div class="uk-position-center uk-panel"><h1>5</h1></div>
            </div>
        </div>
    </div>

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

</div>

          注意 这个示例把高度设为视口高度的 70%。

          内容

          滑块并不限于图片。可以使用任意内容，例如文字、视频、带文字覆盖层的图片，或肯·伯恩斯（Ken Burns）效果。下面是一个使用 Card 组件 的示例。

          Headline

          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

          Headline

          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

          Headline

          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

          Headline

          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

          Headline

          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

            <div class="uk-slider-container-offset" uk-slider>

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

        <div class="uk-slider-items uk-child-width-1-2@s uk-grid">
            <div>
                <div class="uk-card uk-card-default">
                    <div class="uk-card-media-top">
                        <img src="images/photo.jpg" width="1800" height="1200" alt="">
                    </div>
                    <div class="uk-card-body">
                        <h3 class="uk-card-title">Headline</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
                    </div>
                </div>
            </div>
            <div>
                <div class="uk-card uk-card-default">
                    <div class="uk-card-media-top">
                        <img src="images/dark.jpg" width="1800" height="1200" alt="">
                    </div>
                    <div class="uk-card-body">
                        <h3 class="uk-card-title">Headline</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
                    </div>
                </div>
            </div>
            <div>
                <div class="uk-card uk-card-default">
                    <div class="uk-card-media-top">
                        <img src="images/light.jpg" width="1800" height="1200" alt="">
                    </div>
                    <div class="uk-card-body">
                        <h3 class="uk-card-title">Headline</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
                    </div>
                </div>
            </div>
            <div>
                <div class="uk-card uk-card-default">
                    <div class="uk-card-media-top">
                        <img src="images/photo2.jpg" width="1800" height="1200" alt="">
                    </div>
                    <div class="uk-card-body">
                        <h3 class="uk-card-title">Headline</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
                    </div>
                </div>
            </div>
            <div>
                <div class="uk-card uk-card-default">
                    <div class="uk-card-media-top">
                        <img src="images/photo3.jpg" width="1800" height="1200" alt="">
                    </div>
                    <div class="uk-card-body">
                        <h3 class="uk-card-title">Headline</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
                    </div>
                </div>
            </div>
        </div>

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

    </div>

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

</div>

            注意 由于滑块效果需要裁剪容器，内容项的盒阴影也会被裁剪。要加宽容器以避免盒阴影被裁剪，添加 .uk-slider-container-offset 类。或者，如果你的内容项带有盒阴影，可以使用 uk-slider="center: true" 模式。

            内容覆盖层

            使用 Position 组件 添加内容覆盖层。它让你可以把内容放在幻灯片内的任意位置。

            <div uk-slider>
    <div class="uk-slider-items">
        <div>
            <img src="" width="" height="" alt="">
            <div class="uk-position-center">

                <!-- The content goes here -->

            </div>
        </div>
    </div>
</div>

            注意 要让内容在每张图片上都更清晰可见，可添加 Inverse 组件 中的 .uk-light 或 .uk-dark 类，或者使用 Overlay 为覆盖层盒子添加任意样式。

            1

            2

            3

            4

            5

            6

            7

            8

            9

            10

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

    <div class="uk-slider-items uk-child-width-1-2 uk-child-width-1-3@s uk-child-width-1-4@m">
        <div>
            <img src="images/slider1.jpg" width="400" height="600" alt="">
            <div class="uk-position-center uk-panel"><h1>1</h1></div>
        </div>
        <div>
            <img src="images/slider2.jpg" width="400" height="600" alt="">
            <div class="uk-position-center uk-panel"><h1>2</h1></div>
        </div>
        <div>
            <img src="images/slider3.jpg" width="400" height="600" alt="">
            <div class="uk-position-center uk-panel"><h1>3</h1></div>
        </div>
        <div>
            <img src="images/slider4.jpg" width="400" height="600" alt="">
            <div class="uk-position-center uk-panel"><h1>4</h1></div>
        </div>
        <div>
            <img src="images/slider5.jpg" width="400" height="600" alt="">
            <div class="uk-position-center uk-panel"><h1>5</h1></div>
        </div>
        <div>
            <img src="images/slider1.jpg" width="400" height="600" alt="">
            <div class="uk-position-center uk-panel"><h1>6</h1></div>
        </div>
        <div>
            <img src="images/slider2.jpg" width="400" height="600" alt="">
            <div class="uk-position-center uk-panel"><h1>7</h1></div>
        </div>
        <div>
            <img src="images/slider3.jpg" width="400" height="600" alt="">
            <div class="uk-position-center uk-panel"><h1>8</h1></div>
        </div>
        <div>
            <img src="images/slider4.jpg" width="400" height="600" alt="">
            <div class="uk-position-center uk-panel"><h1>9</h1></div>
        </div>
        <div>
            <img src="images/slider5.jpg" width="400" height="600" alt="">
            <div class="uk-position-center uk-panel"><h1>10</h1></div>
        </div>
    </div>

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

</div>

            内容视差

            为幻灯片内部的任意元素添加 uk-slider-parallax 属性，即可让它随着滑块动画一起播放动画。为每个想要添加动画的 CSS 属性添加一个选项，并填入所需的动画值。至少要定义一个起始值和一个结束值，用逗号分隔两个值即可实现。

            该功能继承自 Parallax 组件，可根据滑块动画的滚动位置为 CSS 属性添加动画。可以查看 可用的属性。

            <div uk-slider>
    <div class="uk-slider-items">
        <div>
            <img src="" width="" height="" alt="">
            <div class="uk-position-center">

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

                    <!-- The content goes here -->

                </div>

            </div>
        </div>
    </div>
</div>

            在上面的示例中，内容会从 100 开始，在幻灯片移入的过程中动画到一半处的 0。当幻灯片开始移出时，内容会继续动画到 -100。之所以能这样，是因为起始值和结束值的距离相同。如果距离不同，则需要三个值：Start（幻灯片移入）、Middle（幻灯片居中）、End（幻灯片移出）。

            <div uk-slider-parallax="x: 300,0,-100">…</div>

            下一个示例定义了不同的移入和移出动画。内容从 100 移动到 0 滑入，并从 1 淡出到 0。

            <div uk-slider-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.

            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-slider>

    <div class="uk-slider-items uk-grid">
        <div class="uk-width-4-5">
            <div class="uk-panel">
                <img src="images/photo.jpg" width="1800" height="1200" alt="">
                <div class="uk-position-center uk-text-center">
                    <h2 uk-slider-parallax="x: 100,-100">Heading</h2>
                    <p uk-slider-parallax="x: 200,-200">Lorem ipsum dolor sit amet.</p>
                </div>
            </div>
        </div>
        <div class="uk-width-4-5">
            <div class="uk-panel">
                <img src="images/dark.jpg" width="1800" height="1200" alt="">
                <div class="uk-position-center uk-text-center">
                    <h2 uk-slider-parallax="x: 100,-100">Heading</h2>
                    <p uk-slider-parallax="x: 200,-200">Lorem ipsum dolor sit amet.</p>
                </div>
            </div>
        </div>
        <div class="uk-width-4-5">
            <div class="uk-panel">
                <img src="images/light.jpg" width="1800" height="1200" alt="">
                <div class="uk-position-center uk-text-center">
                    <h2 uk-slider-parallax="x: 100,-100">Heading</h2>
                    <p uk-slider-parallax="x: 200,-200">Lorem ipsum dolor sit amet.</p>
                </div>
            </div>
        </div>
        <div class="uk-width-4-5">
            <div class="uk-panel">
                <img src="images/photo2.jpg" width="1800" height="1200" alt="">
                <div class="uk-position-center uk-text-center">
                    <h2 uk-slider-parallax="x: 100,-100">Heading</h2>
                    <p uk-slider-parallax="x: 200,-200">Lorem ipsum dolor sit amet.</p>
                </div>
            </div>
        </div>
        <div class="uk-width-4-5">
            <div class="uk-panel">
                <img src="images/photo3.jpg" width="1800" height="1200" alt="">
                <div class="uk-position-center uk-text-center">
                    <h2 uk-slider-parallax="x: 100,-100">Heading</h2>
                    <p uk-slider-parallax="x: 200,-200">Lorem ipsum dolor sit amet.</p>
                </div>
            </div>
        </div>
    </div>

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

</div>

            内容过渡

            在属性中添加 clsActivated: uk-transition-active，即可在幻灯片内部自动触发 Transition 组件 中的过渡类。与视差效果不同，过渡并不依附于滑块动画，而是在滑块动画结束后独立开始播放。

            <div uk-slider="clsActivated: uk-transition-active">
    <div class="uk-slider-items">
        <div>
            <img src="" width="" height="" alt="">
            <div class="uk-position-bottom">

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

                    <!-- The content goes here -->

                </div>

            </div>
        </div>
    </div>
</div>

            配合 Overlay 组件，内容过渡可用于为滑块构建经典的字幕。

            Bottom

            Lorem ipsum dolor sit amet, consectetur adipiscing elit.

            Bottom

            Lorem ipsum dolor sit amet, consectetur adipiscing elit.

            Bottom

            Lorem ipsum dolor sit amet, consectetur adipiscing elit.

            Bottom

            Lorem ipsum dolor sit amet, consectetur adipiscing elit.

            Bottom

            Lorem ipsum dolor sit amet, consectetur adipiscing elit.

            <div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slider="clsActivated: uk-transition-active; center: true">

    <div class="uk-slider-items uk-grid">
        <div class="uk-width-3-4">
            <div class="uk-panel">
                <img src="images/photo.jpg" width="1800" height="1200" alt="">
                <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>
            </div>
        </div>
        <div class="uk-width-3-4">
            <div class="uk-panel">
                <img src="images/dark.jpg" width="1800" height="1200" alt="">
                <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>
            </div>
        </div>
        <div class="uk-width-3-4">
            <div class="uk-panel">
                <img src="images/light.jpg" width="1800" height="1200" alt="">
                <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>
            </div>
        </div>
        <div class="uk-width-3-4">
            <div class="uk-panel">
                <img src="images/photo2.jpg" width="1800" height="1200" alt="">
                <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>
            </div>
        </div>
        <div class="uk-width-3-4">
            <div class="uk-panel">
                <img src="images/photo3.jpg" width="1800" height="1200" alt="">
                <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>
            </div>
        </div>
    </div>

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

</div>

            悬停时切换

            要在悬停时切换过渡，使用 Transition 组件 中的 .uk-transition-toggle 类和 tabindex="0"。这样当元素被悬停或聚焦时就会触发过渡。

            <div uk-slider>
    <div class="uk-slider-items">
        <div class="uk-transition-toggle" tabindex="0">
            <img src="" width="" height="" alt="">
            <div class="uk-position-bottom">

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

                    <!-- The content goes here -->

                </div>

            </div>
        </div>
    </div>
</div>

            1

            2

            3

            4

            5

            6

            7

            8

            9

            10

              <div uk-slider>

    <div class="uk-slider-items uk-child-width-1-2 uk-child-width-1-3@s uk-child-width-1-4@m uk-light">
        <div class="uk-transition-toggle" tabindex="0">
            <img src="images/slider1.jpg" width="400" height="600" alt="">
            <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">1</h1></div>
        </div>
        <div class="uk-transition-toggle" tabindex="0">
            <img src="images/slider2.jpg" width="400" height="600" alt="">
            <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">2</h1></div>
        </div>
        <div class="uk-transition-toggle" tabindex="0">
            <img src="images/slider3.jpg" width="400" height="600" alt="">
            <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">3</h1></div>
        </div>
        <div class="uk-transition-toggle" tabindex="0">
            <img src="images/slider4.jpg" width="400" height="600" alt="">
            <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">4</h1></div>
        </div>
        <div class="uk-transition-toggle" tabindex="0">
            <img src="images/slider5.jpg" width="400" height="600" alt="">
            <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">5</h1></div>
        </div>
        <div class="uk-transition-toggle" tabindex="0">
            <img src="images/slider1.jpg" width="400" height="600" alt="">
            <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">6</h1></div>
        </div>
        <div class="uk-transition-toggle" tabindex="0">
            <img src="images/slider2.jpg" width="400" height="600" alt="">
            <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">7</h1></div>
        </div>
        <div class="uk-transition-toggle" tabindex="0">
            <img src="images/slider3.jpg" width="400" height="600" alt="">
            <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">8</h1></div>
        </div>
        <div class="uk-transition-toggle" tabindex="0">
            <img src="images/slider4.jpg" width="400" height="600" alt="">
            <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">9</h1></div>
        </div>
        <div class="uk-transition-toggle" tabindex="0">
            <img src="images/slider5.jpg" width="400" height="600" alt="">
            <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">10</h1></div>
        </div>
    </div>

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

</div>

              组件选项

              这些选项都可以通过组件属性传入。多个选项之间用分号分隔。了解更多

              选项 值 默认值 说明
              autoplay Boolean false 滑块自动播放。
              autoplay-interval Number 7000 自动播放模式下切换幻灯片之间的延迟时间。
              center Boolean false 让激活的幻灯片居中。
              draggable Boolean true 启用指针拖拽。
              easing String ease 动画缓动（CSS 时间函数或 cubic-bezier）。
              finite Boolean false 禁用无限滑动。
              index Number 0 要显示的滑块项目。索引从 0 开始。
              active String all 要应用过渡激活类的滑块项目（all、first）。
              pause-on-hover Boolean true 悬停时暂停自动播放模式。
              sets Boolean false 按整组滑动。
              velocity Number 1 动画速度（像素/毫秒）。

              JavaScript

              进一步了解 JavaScript 组件。

              初始化

              UIkit.slider(element, options);

              事件

              以下事件会在绑定了该组件的元素上触发：

              名称 说明
              beforeitemshow 项目显示之前触发。
              itemshow 项目显示之后触发。
              itemshown 项目的显示动画完成后触发。
              beforeitemhide 项目隐藏之前触发。
              itemhide 项目的隐藏动画开始后触发。
              itemhidden 项目的隐藏动画完成后触发。

              方法

              该组件提供以下方法：

              Show

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

              显示滑块项目。

              StartAutoplay

              UIkit.slider(element).startAutoplay();

              启动滑块自动播放。

              StopAutoplay

              UIkit.slider(element).stopAutoplay();

              停止滑块自动播放。

              可访问性

              Slider 组件遵循 Carousel WAI-ARIA 设计模式，并会自动设置合适的 WAI-ARIA 角色、状态和属性。

              选项卡导航遵循 tab 模式。

              上一个/下一个导航遵循 button 模式。

              键盘交互

              当 Slider 组件中的任意元素获得焦点时，自动播放会停止。选项卡导航可以通过下列按键使用键盘访问。

              国际化

              Slider 组件使用下列翻译字符串。进一步了解 组件翻译。

              Key 默认值 说明
              next Next Slide 下一个幻灯片按钮的 aria-label。
              previous Previous Slide 上一个幻灯片按钮的 aria-label。
              slideX Slide %s 分页幻灯片按钮的 aria-label。
              slideLabel %s of %s 幻灯片的 aria-label。