滑块

创建一个响应式的轮播滑块。

滑块组件完全响应式，支持触控和滑动导航，以及桌面端的鼠标拖动。它甚至会加速以跟上你的速度，当你在 `前一个和下一个` 导航之间点击时。所有动画都是硬件加速的，以获得更流畅的性能。

用法

要应用此组件，请将 uk-slider 属性添加到一个容器元素中，并使用 .uk-slider-items 类创建一个幻灯片列表。向每个项目添加一个图像或任何其他内容。

要定义滑块项目宽度，请使用宽度组件。可以将 .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" 属性。滑块会自动从相邻幻灯片中的图像中删除该属性。

容器

.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 类。

间隙

要将间隙应用于滑块项目，请使用网格组件并将 .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 类，这使得滑块看起来非常像幻灯片。

自动播放

要激活自动播放，只需将 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>

幻灯片组件的灵活性允许您使用任何其他 UIkit 组件来浏览项目。例如，滑块导航、点导航和缩略图导航组件可用于设置幻灯片导航的样式。

如果导航项目中没有项目特定内容，您也可以添加 .uk-slider-nav 类，而不是手动添加导航项目。它将使用 <li><a href></a></li> 作为标记自动生成其项目。这在使用点导航时是一个有用的快捷方式。

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

注意为了更好地显示覆盖导航，请添加来自反转组件的 .uk-light 或 .uk-dark 类。

要将导航放置在滑块之外，请将来自定位组件的 .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>

视窗高度

将来自高度组件的 uk-height-viewport 属性添加到滑块项目列表中，将使 <ul> 和 <li> 元素的高度拉伸以填充整个视窗高度。由于宽度和高度不再由项目的內容定义，因此您必须为內容使用绝对定位。

使用封面组件使图像覆盖整个项目区域并被裁剪。来自网格组件的 .uk-grid-match 类匹配每个项目的直接子元素的高度。这在示例中很有用，因为子元素现在应用了与列表项相同的宽度和高度。

<div uk-slider>
    <div class="uk-slider-items uk-child-width-1-3@m uk-grid-match" uk-height-viewport="min-height: 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%。

内容

滑块不限于图像。可以使用任何内容，例如文本、视频、带有文本叠加的图像或肯·伯恩斯效果。以下示例使用卡片组件。

标题

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

标题

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

标题

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

标题

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

标题

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" 模式。

内容叠加

使用定位组件添加内容叠加。它允许您将内容放置在幻灯片内的任何位置。

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

注意要适应您的内容，使其在每张图像上具有更好的可见性，请添加来自反转组件的 .uk-light 或 .uk-dark 类，或者使用叠加为叠加框添加任何样式。

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 属性添加一个选项，其中包含所需的动画值。至少定义一个开始值和结束值。可以通过传递用逗号分隔的两个值来完成。

此功能继承自视差组件，它允许根据滑块动画的滚动位置来动画化 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。这是因为开始值和结束值具有相同的距离。对于不同的距离，需要三个值：开始（幻灯片移入）、中间（幻灯片居中）、结束（幻灯片移出）。

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

标题

Lorem ipsum dolor sit amet.

标题

Lorem ipsum dolor sit amet.

标题

Lorem ipsum dolor sit amet.

标题

Lorem ipsum dolor sit amet.

标题

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 以自动触发来自过渡组件的过渡类。与视差效果相反，过渡不会附加到滑块动画，而是在滑块动画后独立播放。

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

与叠加组件一起，内容过渡用于为滑块构建一个经典的标题。

底部

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

底部

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

底部

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

底部

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

底部

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>

鼠标悬停时切换

要切换鼠标悬停时的过渡，请使用来自过渡组件的 .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`	布尔值	`false`	滑块自动播放。
`autoplay-interval`	数字	`7000`	自动播放模式下切换幻灯片之间的延迟。
`center`	布尔值	`false`	将活动幻灯片居中。
`可拖动`	布尔值	`true`	启用指针拖动。
`缓动`	字符串	`ease`	动画缓动（CSS 定时函数或 cubic-bezier）。
`有限`	布尔值	`false`	禁用无限滑动。
`索引`	数字	`0`	要显示的幻灯片项。从 0 开始的索引。
`活动`	字符串	`全部`	要应用过渡活动类的幻灯片项/项（全部，第一个）。
`暂停悬停`	布尔值	`true`	悬停时暂停自动播放模式。
`集`	布尔值	`false`	以集的形式滑动。
`速度`	数字	`1`	动画速度（像素/毫秒）。

JavaScript

了解有关 JavaScript 组件的更多信息。

初始化

UIkit.slider(element, options);

事件

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

名称	描述
`beforeitemshow`	在显示项目之前触发。
`itemshow`	在显示项目后触发。
`itemshown`	在项目显示动画完成之后触发。
`beforeitemhide`	在隐藏项目之前触发。
`itemhide`	在项目隐藏动画开始之后触发。
`itemhidden`	在项目隐藏动画完成之后触发。

方法

以下方法可用于组件

显示

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

显示幻灯片项。

StartAutoplay

UIkit.slider(element).startAutoplay();

启动幻灯片自动播放。

StopAutoplay

UIkit.slider(element).stopAutoplay();

停止幻灯片自动播放。

可访问性

Slider 组件符合 Carousel WAI-ARIA 设计模式并自动设置相应的 WAI-ARIA 角色、状态和属性。

滑块的 aria-roledescription 属性设置为 carousel。
幻灯片列表 具有 ID、presentation 角色和 aria-live 属性。
幻灯片 具有 ID、如果滑块只有上一个/下一个导航，则为 group 角色，如果它有选项卡导航，则为 tabpanel 角色，aria-roledescription 属性设置为 slide 以及 aria-label 属性。

选项卡导航符合选项卡模式。

选项卡导航 具有 tablist 角色。
选项卡导航项 具有 presentation 角色。
选项卡导航链接 具有 tab 角色、aria-selected 状态、设置为相应幻灯片 ID 的 aria-controls 属性以及 aria-label 属性。

上一个/下一个导航符合按钮模式。

上一个/下一个导航项 具有 aria-label 属性、设置为幻灯片列表 ID 的 aria-controls 属性，以及如果使用 <a> 元素，则为 button 角色。

键盘交互

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

tab 或 shift+tab 键将焦点置于选项卡导航中的活动选项卡上。如果焦点已经位于活动选项卡上，则焦点将移动到选项卡导航之外的下一个元素。
根据方向，左/右箭头 或 右/下箭头 键在选项卡之间导航。相应的幻灯片将自动变为活动状态。如果焦点位于最后一个选项卡上，则会移动到第一个选项卡。
home 或 end 键将焦点移动到第一个或最后一个选项卡。

国际化

Slider 组件使用以下翻译字符串。了解有关翻译组件的更多信息。

键	默认	描述
`next`	`下一张幻灯片`	下一张幻灯片按钮的 `aria-label`。
`previous`	`上一张幻灯片`	上一张幻灯片按钮的 `aria-label`。
`slideX`	`幻灯片 %s`	分页幻灯片按钮的 `aria-label`。
`slideLabel`	`%s of %s`	幻灯片的 `aria-label`。

文档

滑块

1

2

3

4

5

6

7

8

9

10

1

2

3

4

5

6

7

8

9

10

1

2

3

4

5

1

2

3

4

5

6

7

8

9

10

1

2

3

4

5

6

7

8

9

10

1

2

3

4

5

6

7

8

9

10

1

2

3

4

5

6

7

8

9

10

1

2

3

4

5

6

7

8

9

10

1

2

3