幻燈片

建立具有圖片和影片的響應式幻燈片。

幻燈片組件完全響應式，並支援觸控和滑動導航，以及桌面的滑鼠拖曳。在幻燈片之間滑動時，動畫會確實地跟隨您的手指或滑鼠游標。當您點擊上一張和下一張導覽時，它會加速以跟上您的速度。所有動畫均經過硬體加速，以獲得更流暢的效能。

使用方式

要套用此組件，請將 uk-slideshow 屬性新增至容器元素，並使用 .uk-slideshow-items 類別建立幻燈片列表。

使用覆蓋組件的 uk-cover 屬性，在每個幻燈片的背景中新增圖片。

<div uk-slideshow>
    <div class="uk-slideshow-items">
        <div>
            <img src="" alt="" uk-cover>
        </div>
    </div>
</div>

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

    <div class="uk-slideshow-items">
        <div>
            <img src="images/photo.jpg" alt="" uk-cover>
        </div>
        <div>
            <img src="images/dark.jpg" alt="" uk-cover>
        </div>
        <div>
            <img src="images/light.jpg" alt="" uk-cover>
        </div>
    </div>

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

</div>

注意若要在幻燈片中延遲載入圖片，請使用 loading="lazy" 屬性。幻燈片會自動移除相鄰幻燈片中圖片的屬性。

動畫

預設情況下，幻燈片會使用 slide 動畫。您可以設定 animation 選項來使用不同的動畫。可能的值如下

動畫	描述
`slide`	幻燈片並排滑入。
`fade`	幻燈片淡入。
`scale`	幻燈片放大並淡出。
`pull`	幻燈片從牌組中拉出。
`push`	幻燈片被推入牌組。

<div uk-slideshow="animation: fade">…</div>

滑動

淡化

縮放

拉出

推入

<div class="uk-child-width-1-2@m" uk-grid>
    <div>

        <div class="uk-h3">Slide</div>

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

            <div class="uk-slideshow-items">
                <div>
                    <img src="images/photo.jpg" alt="" uk-cover>
                </div>
                <div>
                    <img src="images/dark.jpg" alt="" uk-cover>
                </div>
                <div>
                    <img src="images/light.jpg" alt="" uk-cover>
                </div>
            </div>

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

        </div>

    </div>
    <div>

        <div class="uk-h3">Fade</div>

        <div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slideshow="animation: fade">

            <div class="uk-slideshow-items">
                <div>
                    <img src="images/photo.jpg" alt="" uk-cover>
                </div>
                <div>
                    <img src="images/dark.jpg" alt="" uk-cover>
                </div>
                <div>
                    <img src="images/light.jpg" alt="" uk-cover>
                </div>
            </div>

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

        </div>

    </div>
    <div>

        <div class="uk-h3">Scale</div>

        <div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slideshow="animation: scale">

            <div class="uk-slideshow-items">
                <div>
                    <img src="images/photo.jpg" alt="" uk-cover>
                </div>
                <div>
                    <img src="images/dark.jpg" alt="" uk-cover>
                </div>
                <div>
                    <img src="images/light.jpg" alt="" uk-cover>
                </div>
            </div>

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

        </div>

    </div>
    <div>

        <div class="uk-h3">Pull</div>

        <div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slideshow="animation: pull">

            <div class="uk-slideshow-items">
                <div>
                    <img src="images/photo.jpg" alt="" uk-cover>
                </div>
                <div>
                    <img src="images/dark.jpg" alt="" uk-cover>
                </div>
                <div>
                    <img src="images/light.jpg" alt="" uk-cover>
                </div>
            </div>

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

        </div>

    </div>
    <div>

        <div class="uk-h3">Push</div>

        <div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slideshow="animation: push">

            <div class="uk-slideshow-items">
                <div>
                    <img src="images/photo.jpg" alt="" uk-cover>
                </div>
                <div>
                    <img src="images/dark.jpg" alt="" uk-cover>
                </div>
                <div>
                    <img src="images/light.jpg" alt="" uk-cover>
                </div>
            </div>

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

        </div>

    </div>
</div>

自動播放

若要啟用自動播放，只需將 autoplay: true 選項新增至屬性即可。您也可以使用 autoplay-interval: 6000 設定切換幻燈片之間的時間間隔（以毫秒為單位）。若要在滑鼠停留在幻燈片上時暫停自動播放，請使用 pause-on-hover: true。

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

無限滾動

預設情況下，會啟用無限滾動。若要停用此行為，只需將 finite: true 選項新增至屬性即可。

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

比例

幻燈片始終佔用其父容器的完整寬度。高度會根據定義的比例調整。若要變更預設的 16:9 比例，只需將 ratio 選項新增至屬性即可。建議使用與背景圖片相同的比例。例如，只需使用其寬度和高度，例如 1600:1200。

<div uk-slideshow="ratio: 7:3">…</div>

<div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slideshow="ratio: 7:3; animation: push">

    <div class="uk-slideshow-items">
        <div>
            <img src="images/photo.jpg" alt="" uk-cover>
        </div>
        <div>
            <img src="images/dark.jpg" alt="" uk-cover>
        </div>
        <div>
            <img src="images/light.jpg" alt="" uk-cover>
        </div>
    </div>

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

</div>

最小/最大高度

預設情況下，幻燈片高度會採用定義的比例。可以使用 min-height 和 max-height 選項設定最小或最大高度。

<div uk-slideshow="min-height: 300; max-height: 600">…</div>

<div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slideshow="min-height: 300; max-height: 600; animation: push">

    <div class="uk-slideshow-items">
        <div>
            <img src="images/photo.jpg" alt="" uk-cover>
        </div>
        <div>
            <img src="images/dark.jpg" alt="" uk-cover>
        </div>
        <div>
            <img src="images/light.jpg" alt="" uk-cover>
        </div>
    </div>

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

</div>

視窗高度

將高度組件的 uk-height-viewport 屬性新增至幻燈片項目列表，將會將高度延伸以填滿整個視窗。您可以設定 min-height 選項來定義最小高度。

<div uk-slideshow="ratio: false">
    <ul class="uk-slideshow-items" uk-height-viewport="min-height: 300">…</ul>
</div>

<div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slideshow="ratio: false">

    <div class="uk-slideshow-items" uk-height-viewport="offset-top: true; offset-bottom: 30">
        <div>
            <img src="images/photo.jpg" alt="" uk-cover>
        </div>
        <div>
            <img src="images/dark.jpg" alt="" uk-cover>
        </div>
        <div>
            <img src="images/light.jpg" alt="" uk-cover>
        </div>
    </div>

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

</div>

注意此範例設定為視窗高度的 70%。

若要瀏覽幻燈片，只需使用 uk-slideshow-item 屬性。若要以幻燈片為目標，請將每個導覽項目的屬性設定為各自幻燈片項目的索引編號。具有 uk-slideshow-item 屬性的元素必須位於 uk-slideshow 容器內。將屬性設定為 next 和 previous 將會切換到相鄰的幻燈片。

<div uk-slideshow>

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

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

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

</div>

幻燈片組件的靈活性允許您使用任何其他 UIkit 組件來瀏覽項目。例如，滑動導航、點導航和縮圖導航組件可用於設定幻燈片導覽的樣式。

如果導覽項目中沒有項目特定的內容，您也可以新增 .uk-slideshow-nav 類別，而不是手動新增導覽項目。它會使用 <li><a href></a></li> 作為標記自動產生其項目。當使用點導航時，這是一個有用的捷徑。

<div uk-slideshow>

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

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

</div>

<div uk-slideshow="animation: push">

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

        <div class="uk-slideshow-items">
            <div>
                <img src="images/photo.jpg" alt="" uk-cover>
            </div>
            <div>
                <img src="images/dark.jpg" alt="" uk-cover>
            </div>
            <div>
                <img src="images/light.jpg" alt="" uk-cover>
            </div>
        </div>

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

    </div>

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

</div>

注意為了讓覆蓋導覽具有更好的可見性，請新增反相組件中的 .uk-light 或 .uk-dark 類別。

視差動畫

幻燈片可以使用基於視窗中滾動位置的無步進視差動畫，而不是使用導覽控制的逐步動畫。只需將 parallax: true 新增至屬性即可。如果標記中設定了導覽，則無法點擊它，但它會取得目前幻燈片的活動狀態。

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

<div uk-slideshow="animation: push; parallax: true;">

    <div class="uk-slideshow-items">
        <div>
            <img src="images/photo.jpg" alt="" uk-cover>
        </div>
        <div>
            <img src="images/dark.jpg" alt="" uk-cover>
        </div>
        <div>
            <img src="images/light.jpg" alt="" uk-cover>
        </div>
    </div>

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

</div>

若要調整視差持續時間，請設定 parallax-start 和 parallax-end 選項。parallax-start 選項定義動畫何時開始。預設值 0 表示幻燈片的頂部邊框和視窗的底部邊框相交。end 選項定義動畫何時結束。預設值 0 表示幻燈片的底部邊框和視窗的頂部邊框相交。值可以設定為任何維度單位，即 vh、% 和 px。% 單位與幻燈片的高度有關。這兩個選項都允許基本的數學運算元，+ 和 -。

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

<div uk-slideshow="animation: push; parallax: true; parallax-start: 100%; parallax-end: 100%;">

    <div class="uk-slideshow-items">
        <div>
            <img src="images/photo.jpg" alt="" uk-cover>
        </div>
        <div>
            <img src="images/dark.jpg" alt="" uk-cover>
        </div>
        <div>
            <img src="images/light.jpg" alt="" uk-cover>
        </div>
    </div>

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

</div>

影片

幻燈片不限於圖片。其他媒體，例如影片，可以使用覆蓋組件的 uk-cover 屬性放置在每個幻燈片的背景中。影片會靜音，並自動播放。當影片不可見時，會暫停；一旦再次可見，就會恢復播放。

<div uk-slideshow>
    <div class="uk-slideshow-items">
        <div>
            <video src="" autoplay loop muted playsinline uk-cover></video>
        </div>
        <div>
            <iframe src="" uk-cover></iframe>
        </div>
    </div>
</div>

<div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slideshow="animation: push">

    <div class="uk-slideshow-items">
        <div>
            <img src="images/photo.jpg" alt="" uk-cover>
        </div>
        <div>
            <video src="https://yootheme.com/site/images/media/yootheme-pro.mp4" autoplay loop muted playsinline uk-cover></video>
        </div>
        <div>
            <iframe src="https://www.youtube-nocookie.com/embed/c2pz2mlSfXA?autoplay=1&amp;controls=0&amp;showinfo=0&amp;rel=0&amp;loop=1&amp;modestbranding=1&amp;wmode=transparent&amp;playsinline=1" width="1920" height="1080" allowfullscreen uk-cover></iframe>
        </div>
    </div>

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

</div>

肯·伯恩斯效果

若要新增簡單的肯·伯恩斯效果，請使用 div 包裝圖片，並新增 .uk-position-cover 和 .uk-animation-kenburns 類別。您也可以套用 .uk-animation-reverse 或實用工具組件中的 .uk-transform-origin-* 類別之一來修改效果。

<div uk-slideshow>
    <div class="uk-slideshow-items">
        <div>
            <div class="uk-position-cover uk-animation-kenburns uk-animation-reverse uk-transform-origin-center-left">
                <img src="" alt="" uk-cover>
            </div>
        </div>
    </div>
</div>

<div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slideshow="animation: push">

    <div class="uk-slideshow-items">
        <div>
            <div class="uk-position-cover uk-animation-kenburns uk-animation-reverse uk-transform-origin-center-left">
                <img src="images/photo.jpg" alt="" uk-cover>
            </div>
        </div>
        <div>
            <div class="uk-position-cover uk-animation-kenburns uk-animation-reverse uk-transform-origin-top-right">
                <img src="images/dark.jpg" alt="" uk-cover>
            </div>
        </div>
        <div>
            <div class="uk-position-cover uk-animation-kenburns uk-animation-reverse uk-transform-origin-bottom-left">
                <img src="images/light.jpg" alt="" uk-cover>
            </div>
        </div>
    </div>

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

</div>

內容覆蓋

使用位置組件新增內容覆蓋。它允許您將內容放置在幻燈片內的任何位置。

<div uk-slideshow>
    <div class="uk-slideshow-items">
        <div>
            <img src="" alt="" uk-cover>
            <div class="uk-position-center uk-position-small">

                <!-- The content goes here -->

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

注意若要調整內容以在每個圖片上獲得更好的可見性，請新增反相組件中的 .uk-light 或 .uk-dark 類別，或使用覆蓋層將任何樣式新增至覆蓋方塊。

中心

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.

<div class="uk-position-relative uk-visible-toggle" tabindex="-1" uk-slideshow="animation: push">

    <div class="uk-slideshow-items">
        <div>
            <img src="images/photo.jpg" alt="" uk-cover>
            <div class="uk-position-center uk-position-small uk-text-center uk-light">
                <h2 class="uk-margin-remove">Center</h2>
                <p class="uk-margin-remove">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
        </div>
        <div>
            <img src="images/dark.jpg" alt="" uk-cover>
            <div class="uk-position-bottom uk-position-medium uk-text-center uk-light">
                <h3 class="uk-margin-remove">Bottom</h3>
                <p class="uk-margin-remove">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
        </div>
        <div>
            <img src="images/light.jpg" alt="" uk-cover>
            <div class="uk-overlay uk-overlay-primary uk-position-bottom uk-text-center">
                <h3 class="uk-margin-remove">Overlay Bottom</h3>
                <p class="uk-margin-remove">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
        </div>
        <div>
            <img src="images/dark.jpg" alt="" uk-cover>
            <div class="uk-overlay uk-overlay-default uk-position-bottom-right uk-position-small">
                <h3 class="uk-margin-remove">Overlay Bottom Right</h3>
                <p class="uk-margin-remove">Lorem ipsum dolor sit amet.</p>
            </div>
        </div>
    </div>

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

</div>

內容視差

將 uk-slideshow-parallax 屬性新增至幻燈片內的任何元素，使其與幻燈片動畫一起產生動畫。為您要產生動畫的每個 CSS 屬性新增具有所需動畫值的值。至少定義一個開始和結束值。可以透過傳遞以逗號分隔的兩個值來完成。

此功能繼承自視差組件，它允許根據幻燈片動畫的滾動位置來動畫 CSS 屬性。請查看可以產生動畫的可能屬性。

<div uk-slideshow>
    <div class="uk-slideshow-items">
        <div>
            <img src="" alt="" uk-cover>
            <div class="uk-position-center uk-position-small">

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

                    <!-- The content goes here -->

                </div>

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

在上面的範例中，內容將從 100 開始，並在幻燈片滑入時動畫到 0 的一半。當幻燈片再次開始滑出時，內容將繼續動畫到 -100。這是因為開始和結束值具有相同的距離。對於不同的距離，需要三個值：開始（幻燈片動畫進入）、中間（幻燈片置中）、結束（幻燈片動畫退出）。

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

下一個範例定義了不同的進入和退出動畫。內容透過從 100 移動到 0 滑入，並從 1 淡出到 0。

<div uk-slideshow-parallax="x: 100,0,0; opacity: 1,1,0">…</div>

標題

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-slideshow="animation: push">

    <div class="uk-slideshow-items">
        <div>
            <img src="images/photo.jpg" alt="" uk-cover>
            <div class="uk-position-center uk-position-small uk-text-center">
                <h2 uk-slideshow-parallax="x: 100,-100">Heading</h2>
                <p uk-slideshow-parallax="x: 200,-200">Lorem ipsum dolor sit amet.</p>
            </div>
        </div>
        <div>
            <img src="images/dark.jpg" alt="" uk-cover>
            <div class="uk-position-center uk-position-small uk-text-center">
                <h2 uk-slideshow-parallax="x: 100,-100">Heading</h2>
                <p uk-slideshow-parallax="x: 200,-200">Lorem ipsum dolor sit amet.</p>
            </div>
        </div>
        <div>
            <img src="images/light.jpg" alt="" uk-cover>
            <div class="uk-position-center uk-position-small uk-text-center">
                <h2 uk-slideshow-parallax="y: -50,0,0; opacity: 1,1,0">Heading</h2>
                <p uk-slideshow-parallax="y: 50,0,0; opacity: 1,1,0">Lorem ipsum dolor sit amet.</p>
            </div>
        </div>
    </div>

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

</div>

進階效果

視差屬性可用於將其他效果新增至幻燈片動畫。在以下範例中，當圖片滑出時，會藉由調暗和縮小圖片來延伸 push 動畫。

<div uk-slideshow="animation: push">
    <div class="uk-slideshow-items">
        <div>
            <div class="uk-position-cover" uk-slideshow-parallax="scale: 1.2,1.2,1">
                <img src="" alt="" uk-cover>
            </div>
            <div class="uk-position-cover" uk-slideshow-parallax="opacity: 0,0,0.2; backgroundColor: #000,#000"></div>
        </div>
    </div>
</div>

標題

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-slideshow="animation: push">

    <div class="uk-slideshow-items">
        <div>
            <div class="uk-position-cover" uk-slideshow-parallax="scale: 1.2,1.2,1">
                <img src="images/photo.jpg" alt="" uk-cover>
            </div>
            <div class="uk-position-cover" uk-slideshow-parallax="opacity: 0,0,0.2; backgroundColor: #000,#000"></div>
            <div class="uk-position-center uk-position-medium uk-text-center">
                <div uk-slideshow-parallax="scale: 1,1,0.8">
                    <h2 uk-slideshow-parallax="x: 200,0,0">Heading</h2>
                    <p uk-slideshow-parallax="x: 400,0,0;">Lorem ipsum dolor sit amet.</p>
                </div>
            </div>
        </div>
        <div>
            <div class="uk-position-cover" uk-slideshow-parallax="scale: 1.2,1.2,1">
                <img src="images/dark.jpg" alt="" uk-cover>
            </div>
            <div class="uk-position-cover" uk-slideshow-parallax="opacity: 0,0,0.2; backgroundColor: #000,#000"></div>
            <div class="uk-position-center uk-position-medium uk-text-center">
                <div uk-slideshow-parallax="scale: 1,1,0.8">
                    <h2 uk-slideshow-parallax="x: 200,0,0">Heading</h2>
                    <p uk-slideshow-parallax="x: 400,0,0;">Lorem ipsum dolor sit amet.</p>
                </div>
            </div>
        </div>
        <div>
            <div class="uk-position-cover" uk-slideshow-parallax="scale: 1.2,1.2,1">
                <img src="images/light.jpg" alt="" uk-cover>
            </div>
            <div class="uk-position-cover" uk-slideshow-parallax="opacity: 0,0,0.2; backgroundColor: #000,#000"></div>
            <div class="uk-position-center uk-position-medium uk-text-center">
                <div uk-slideshow-parallax="scale: 1,1,0.8">
                    <h2 uk-slideshow-parallax="x: 200,0,0">Heading</h2>
                    <p uk-slideshow-parallax="x: 400,0,0;">Lorem ipsum dolor sit amet.</p>
                </div>
            </div>
        </div>
    </div>

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

</div>

內容轉換

當幻燈片內的轉換組件觸發時，轉換類別會自動啟動。與視差效果相反，轉換不會附加到幻燈片動畫，而是在幻燈片動畫之後獨立開始播放。

<div uk-slideshow>
    <div class="uk-slideshow-items">
        <div>
            <img src="" alt="" uk-cover>
            <div class="uk-position-bottom uk-position-small">

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

                    <!-- The content goes here -->

                </div>

            </div>
        </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.

<div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slideshow="animation: fade">

    <div class="uk-slideshow-items">
        <div>
            <img src="images/photo.jpg" alt="" uk-cover>
            <div class="uk-overlay uk-overlay-primary uk-position-bottom uk-text-center uk-transition-slide-bottom">
                <h3 class="uk-margin-remove">Bottom</h3>
                <p class="uk-margin-remove">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
        </div>
        <div>
            <img src="images/dark.jpg" alt="" uk-cover>
            <div class="uk-overlay uk-overlay-primary uk-position-bottom uk-text-center uk-transition-slide-bottom">
                <h3 class="uk-margin-remove">Bottom</h3>
                <p class="uk-margin-remove">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
        </div>
        <div>
            <img src="images/light.jpg" alt="" uk-cover>
            <div class="uk-overlay uk-overlay-primary uk-position-right uk-text-center uk-transition-slide-right uk-width-medium">
                <h3 class="uk-margin-remove">Left</h3>
                <p class="uk-margin-remove">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
        </div>
    </div>

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

</div>

組件選項

這些選項中的任何一個都可以套用至組件屬性。使用分號分隔多個選項。了解更多

幻燈片

選項	值	預設值	描述
`animation`	字串	`slide`	幻燈片動畫模式 (`slide`、`fade`、`scale`、`pull` 或 `push`)。
`autoplay`	布林值	`false`	幻燈片自動播放。
`autoplay-interval`	數字	`7000`	自動播放模式下切換幻燈片的延遲時間。
`draggable`	布林值	`true`	啟用指標拖曳。
`easing`	字串	`ease`	動畫緩和（CSS 計時函式或 cubic-bezier）。
`finite`	布林值	`false`	停用無限滑動。
`pause-on-hover`	布林值	`true`	在滑鼠停留在上方時暫停自動播放模式。
`index`	數字	`0`	要顯示的幻燈片項目。以 0 為基礎的索引。
`velocity`	數字	`1`	動畫速度（像素/毫秒）。
`ratio`	布林值、字串	`16:9`	比例。（`false` 防止高度調整）
`min-height`	布林值、數字	`false`	最小高度。
`max-height`	布林值、數字	`false`	最大高度。

JavaScript

深入了解JavaScript 組件。

初始化

UIkit.slideshow(element, options);

事件

在附加此組件的元素上將觸發以下事件

名稱	描述
`beforeitemshow`	在顯示項目之前觸發。
`itemshow`	在顯示項目之後觸發。
`itemshown`	在項目顯示動畫完成後觸發。
`beforeitemhide`	在隱藏項目之前觸發。
`itemhide`	在項目的隱藏動畫開始後觸發。
`itemhidden`	在項目的隱藏動畫完成後觸發。

方法

以下方法適用於此組件

顯示

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

顯示幻燈片項目。

startAutoplay

UIkit.slideshow(element).startAutoplay();

啟動幻燈片自動播放。

stopAutoplay

UIkit.slideshow(element).stopAutoplay();

停止幻燈片自動播放。

輔助功能

幻燈片組件遵循輪播 WAI-ARIA 設計模式，並自動設定適當的 WAI-ARIA 角色、狀態和屬性。

幻燈片的 aria-roledescription 屬性設定為 carousel。
幻燈片列表具有 ID 和 aria-live 屬性。
幻燈片具有 ID，如果幻燈片僅有上一個/下一個導覽則具有 group 角色，如果具有標籤導覽則具有 tabpanel 角色，aria-roledescription 屬性設定為 slide，以及 aria-label 屬性。

標籤導覽遵循標籤模式。

標籤導覽具有 tablist 角色。
標籤導覽項目具有 presentation 角色。
標籤導覽連結具有 tab 角色、aria-selected 狀態、aria-controls 屬性設定為對應幻燈片的 ID，以及 aria-label 屬性。

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

上一個/下一個導覽項目具有 aria-label 屬性、aria-controls 屬性設定為幻燈片列表的 ID，如果使用 <a> 元素，則具有 button 角色。

鍵盤互動

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

tab 或 shift+tab 鍵會將焦點放在標籤導覽中的活動標籤上。如果焦點已在活動標籤上，則焦點將移動到標籤導覽外的下一個元素。
根據方向，左/右箭頭 或 上/下箭頭 鍵會在標籤之間導覽。對應的幻燈片將會自動啟用。如果焦點在最後一個標籤上，則會移動到第一個標籤。
home 或 end 鍵會將焦點移動到第一個或最後一個標籤。

國際化

幻燈片組件使用以下翻譯字串。請參閱翻譯組件以瞭解更多資訊。

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

文件

幻燈片

中心

底部

覆蓋層底部

覆蓋層右下角

標題

標題

標題

標題

標題

標題

底部

底部

左