滑块

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

滑块组件完全响应，支持触摸和滑动导航以及桌面鼠标拖拽切换。当您点击上一个和下一个导航时，它还会加速以跟上您的点击速度。所有动画都是硬件加速，以获得更平滑的性能。

用法

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

要定义滑块项的宽度，可以使用Width 组件中的.uk-child-width-* class统一定义所有滑块项的宽度，或者使用.uk-width-* class为每个列表项单独定义宽度。如果没有设置宽度，那么每个项目的宽度由内容本身的宽度决定。

<div uk-slider>
    <ul class="uk-slider-items uk-child-width-1-3@s uk-child-width-1-4@">
        <li>
            <img src="" alt="">
        </li>
    </ul>
</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>

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

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

Note 要在幻灯片中延迟加载图像，请使用loading="lazy"属性，滑块将自动删除相邻幻灯片图像中的该属性。

容器

.uk-slider-container class 负责滑块项目的裁剪。默认情况下，uk-slider 应用于相同的元素。您可以将这个class手动添加到滑块内的任意元素。这样，您可以控制由哪个容器来剪辑滑块项目。

<div uk-slider>

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

</div>

由于滑块效果需要剪切容器，因此内容项的盒子边框的阴影效果也会被剪切掉。如果需要加宽容器以防止阴影效果被剪切，请添加.uk-slider-container-offset类。

间距

若要对滑块项添加间距，请使用Grid 组件并将.uk-grid class 添加到滑块。然后，这些元素将根据网格间隙隔开。您可以使用.uk-grid-small 这样的修饰样式来更改间隙。

<div uk-slider>
    <ul class="uk-slider-items uk-child-width-1-2@s uk-child-width-1-3@m uk-grid">
        <li>
            <img src="" alt="">
        </li>
    </ul>
</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>

    <ul class="uk-slider-items uk-child-width-1-2 uk-child-width-1-3@m uk-grid">
        <li>
            <div class="uk-panel">
                <img src="/skin/ukv3/images/slider1.jpg" alt="">
                <div class="uk-position-center uk-panel"><h1>1</h1></div>
            </div>
        </li>
        <li>
            <div class="uk-panel">

                <img src="/skin/ukv3/images/slider2.jpg" alt="">
                <div class="uk-position-center uk-panel"><h1>2</h1></div>
            </div>
        </li>
        <li>
            <div class="uk-panel">
                <img src="/skin/ukv3/images/slider3.jpg" alt="">
                <div class="uk-position-center uk-panel"><h1>3</h1></div>
            </div>
        </li>
        <li>
            <div class="uk-panel">
                <img src="/skin/ukv3/images/slider4.jpg" alt="">
                <div class="uk-position-center uk-panel"><h1>4</h1></div>
            </div>
        </li>
        <li>
            <div class="uk-panel">
                <img src="/skin/ukv3/images/slider5.jpg" alt="">
                <div class="uk-position-center uk-panel"><h1>5</h1></div>
            </div>
        </li>
        <li>
            <div class="uk-panel">
                <img src="/skin/ukv3/images/slider1.jpg" alt="">
                <div class="uk-position-center uk-panel"><h1>6</h1></div>
            </div>
        </li>
        <li>
            <div class="uk-panel">
                <img src="/skin/ukv3/images/slider2.jpg" alt="">
                <div class="uk-position-center uk-panel"><h1>7</h1></div>
            </div>
        </li>
        <li>
            <div class="uk-panel">
                <img src="/skin/ukv3/images/slider3.jpg" alt="">
                <div class="uk-position-center uk-panel"><h1>8</h1></div>
            </div>
        </li>
        <li>
            <div class="uk-panel">
                <img src="/skin/ukv3/images/slider4.jpg" alt="">
                <div class="uk-position-center uk-panel"><h1>9</h1></div>
            </div>
        </li>
        <li>
            <div class="uk-panel">
                <img src="/skin/ukv3/images/slider5.jpg" alt="">
                <div class="uk-position-center uk-panel"><h1>10</h1></div>
            </div>
        </li>
    </ul>

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

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

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

Note 在这个示例中，我们将.uk-width-3-4 class 添加到了每个项目，这使得滑块看起来与幻灯片非常相似。

自动轮播

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

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

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

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

    <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组件来浏览项目。例如，可以使用Slidenav, Dotnav 和 Thumbnav 组件设置幻灯片导航的样式。

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

<div uk-slider>

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

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

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

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

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

如果要将导航按钮放在滑块外部，请添加Position 组件中年的.uk-position-center-left-out 和 .uk-position-center-right-out class 到previous 和 next 导航。并确保负责剪切滑块项的.uk-slider-container class不会将导航按钮剪切掉。

<div uk-slider>

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

        <div class="uk-slider-container">
            <ul class="uk-slider-items">...</ul>
        </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">
            <ul class="uk-slider-items uk-child-width-1-2 uk-child-width-1-3@s uk-child-width-1-4@m">
                <li>
                    <img src="/skin/ukv3/images/slider1.jpg" alt="">
                    <div class="uk-position-center uk-panel"><h1>1</h1></div>
                </li>
                <li>
                    <img src="/skin/ukv3/images/slider2.jpg" alt="">
                    <div class="uk-position-center uk-panel"><h1>2</h1></div>
                </li>
                <li>
                    <img src="/skin/ukv3/images/slider3.jpg" alt="">
                    <div class="uk-position-center uk-panel"><h1>3</h1></div>
                </li>
                <li>
                    <img src="/skin/ukv3/images/slider4.jpg" alt="">
                    <div class="uk-position-center uk-panel"><h1>4</h1></div>
                </li>
                <li>
                    <img src="/skin/ukv3/images/slider5.jpg" alt="">
                    <div class="uk-position-center uk-panel"><h1>5</h1></div>
                </li>
                <li>
                    <img src="/skin/ukv3/images/slider1.jpg" alt="">
                    <div class="uk-position-center uk-panel"><h1>6</h1></div>
                </li>
                <li>
                    <img src="/skin/ukv3/images/slider2.jpg" alt="">
                    <div class="uk-position-center uk-panel"><h1>7</h1></div>
                </li>
                <li>
                    <img src="/skin/ukv3/images/slider3.jpg" alt="">
                    <div class="uk-position-center uk-panel"><h1>8</h1></div>
                </li>
                <li>
                    <img src="/skin/ukv3/images/slider4.jpg" alt="">
                    <div class="uk-position-center uk-panel"><h1>9</h1></div>
                </li>
                <li>
                    <img src="/skin/ukv3/images/slider5.jpg" alt="">
                    <div class="uk-position-center uk-panel"><h1>10</h1></div>
                </li>
            </ul>
        </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>

视口高度

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

使用Cover 组件使图像覆盖整个项目区域并将超出区域的部分剪裁掉。Grid 组件中的 .uk-grid-match class 匹配每个项的直接子项的高度。在下方示例的场境中将会非常有用，因为子元素现在被应用与列表项相同的宽度和高度。

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

- 1
- 2
- 3
- 4
- 5

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

    <ul class="uk-slider-items uk-grid uk-grid-match" uk-height-viewport="offset-top: true; offset-bottom: 30">
        <li 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>
        </li>
        <li 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>
        </li>
        <li 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>
        </li>
        <li 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>
        </li>
        <li 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>
        </li>
    </ul>

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

Note 这个示例设置为视口高度的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 uk-slider="center: true">

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

        <ul class="uk-slider-items uk-child-width-1-2@s uk-grid">
            <li>
                <div class="uk-card uk-card-default">
                    <div class="uk-card-media-top">
                        <img src="images/photo.jpg" 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>
            </li>
            <li>
                <div class="uk-card uk-card-default">
                    <div class="uk-card-media-top">
                        <img src="images/dark.jpg" 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>
            </li>
            <li>
                <div class="uk-card uk-card-default">
                    <div class="uk-card-media-top">
                        <img src="images/light.jpg" 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>
            </li>
            <li>
                <div class="uk-card uk-card-default">
                    <div class="uk-card-media-top">
                        <img src="images/photo2.jpg" 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>
            </li>
            <li>
                <div class="uk-card uk-card-default">
                    <div class="uk-card-media-top">
                        <img src="images/photo3.jpg" 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>
            </li>
        </ul>

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

Note由于滑块效果需要剪切容器，因此内容项的盒边框阴影也会被剪切掉。如果需要加宽容器以防止剪切阴影，请添加.uk-slider-container-offsetclass。或者，如果内容项有方框阴影，也可以使用uk-slider="center: true"这个方式。

内容遮罩

使用Position 组件添加内容覆盖。它允许您将内容放在滑块中的任何位置。

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

                <!-- The content goes here -->

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

Note 如果要调整内容使其在每个图像上都能获得更好的可见性，请添加Inverse 组件中的.uk-light 或 .uk-dark class ，或使用 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>

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

    <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>
    <ul class="uk-slider-items">
        <li>
            <img src="" alt="">
            <div class="uk-position-center">

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

                    <!-- The content goes here -->

                </div>

            </div>
        </li>
    </ul>
</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>

    <ul class="uk-slider-items uk-grid">
        <li class="uk-width-4-5">
            <div class="uk-panel">
                <img src="images/photo.jpg" 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>
        </li>
        <li class="uk-width-4-5">
            <div class="uk-panel">
                <img src="images/dark.jpg" 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>
        </li>
        <li class="uk-width-4-5">
            <div class="uk-panel">
                <img src="images/light.jpg" 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>
        </li>
        <li class="uk-width-4-5">
            <div class="uk-panel">
                <img src="images/photo2.jpg" 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>
        </li>
        <li class="uk-width-4-5">
            <div class="uk-panel">
                <img src="images/photo3.jpg" 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>
        </li>
    </ul>

    <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 组件自动触发过渡动画class。与视差效果相反的是，过渡动画不会附加到滑块动画同时执行，而是在滑块动画结束后再单独执行。

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

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

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

    <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 class 并使用tabindex="0"。这将在元素悬停或聚焦时触发过渡效果。

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

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

                    <!-- The content goes here -->

                </div>

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

- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10

<div uk-slider>

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

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

</div>

组件选项

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

Slider

Option	Value	Default	Description
`autoplay`	Boolean	`false`	滑块自动播放。
`autoplay-interval`	Number	`7000`	在自动播放模式下切换幻灯片的时间延迟。
`center`	Boolean	`false`	将活动幻灯片居中。
`draggable`	Boolean	`true`	启用鼠标拖拽。
`easing`	String	`ease`	动画缓动效果（CSS计时功能或三次贝塞尔曲线）
`finite`	Boolean	`false`	禁用无限滑动。
`index`	Number	`0`	要显示的滑块项目，从0开始的索引。
`pause-on-hover`	Boolean	`true`	鼠标悬停时暂停自动播放。
`sets`	Boolean	`false`	幻灯片集
`velocity`	Number	`1`	动画速度（像素/毫秒）。

JavaScript

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

初始化

UIkit.slider(element, options);

事件

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

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

方法

以下方法可用于该组件：

显示

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

显示滑块单元。

startAutoplay

UIkit.slider(element).startAutoplay();

开始自动播放滑块。

stopAutoplay

UIkit.slider(element).stopAutoplay();

停止滑块自动播放。

UIkit3.x文档

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

Headline

Headline

Headline

Headline

Headline

1

2

3

4

5

6

7

8

9

10

Heading

Heading

Heading

Heading