跳至主要內容

文件

滑塊

建立響應式輪播滑塊。

滑塊元件具有完整的響應式設計，並支援觸控和滑動導航，以及桌面的滑鼠拖曳。當您點擊「上一個」和「下一個」導航時，它甚至會加速以跟上您的速度。所有動畫都經過硬體加速，以獲得更流暢的效能。

用法

要套用此元件，請將 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%。

          內容

          滑塊不限於圖片。可以使用任何內容，例如文字、影片、具有文字覆蓋層的圖片或 Ken Burns 效果。以下範例使用卡片元件。

          標題

          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 布林值 (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 要套用轉換 active 類別的滑塊項目 (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();

              停止幻燈片自動播放。

              無障礙輔助

              滑塊元件遵循 輪播 WAI-ARIA 設計模式，並自動設置適當的 WAI-ARIA 角色、狀態和屬性。

              標籤導航遵循 標籤模式。

              上一個/下一個導航遵循 按鈕模式。

              鍵盤互動

              當滑塊元件中的任何元素獲得焦點時，自動播放停止。可以使用以下按鍵透過鍵盤存取標籤導航。

              國際化

              滑塊元件使用以下翻譯字串。瞭解更多關於翻譯元件的資訊。

              鍵 預設值 描述
              next 下一張幻燈片 下一張幻燈片按鈕的 aria-label。
              previous 上一張幻燈片 上一張幻燈片按鈕的 aria-label。
              slideX 幻燈片 %s 分頁幻燈片按鈕的 aria-label。
              slideLabel %s / %s 幻燈片的 aria-label。