跳至主要內容

文件

幻燈片導航

定義使用上一張和下一張按鈕來翻閱幻燈片的導覽。

用法

要使用上一張和下一張按鈕建立導覽，只需將 uk-slidenav 屬性添加到 <a> 元素。將 previous 或 next 參數添加到屬性中，以將導覽項目樣式設定為上一張或下一張按鈕。

<a href="" uk-slidenav-next></a>
<a href="" uk-slidenav-previous></a>
<a href="#" uk-slidenav-previous></a>
<a href="#" uk-slidenav-next></a>

大型修飾符

要增加幻燈片導航圖示的大小，請新增 .uk-slidenav-large 類別。

<a href="" class="uk-slidenav-large" uk-slidenav-next></a>
<a href="" class="uk-slidenav-large" uk-slidenav-previous></a>
<a href="#" class="uk-slidenav-large" uk-slidenav-previous></a>
<a href="#" class="uk-slidenav-large" uk-slidenav-next></a>

幻燈片導航容器

要顯示聯接的幻燈片導航，請將幻燈片導航項目包裝在 <div> 元素內，並新增 .uk-slidenav-container 類別，以及其中一個 .uk-position-* 類別。

<div class="uk-slidenav-container">
    <a href="" uk-slidenav-previous></a>
    <a href="" uk-slidenav-next></a>
</div>
<div class="uk-slidenav-container">
    <a href="" uk-slidenav-previous></a>
    <a href="" uk-slidenav-next></a>
</div>

位置為覆蓋層

例如，要將幻燈片導航定位在元素或幻燈片放映元件之上，只需新增位置元件中的其中一個 .uk-position-* 類別。要在容器上建立位置上下文，請新增 .uk-position-relative 類別。

使用反轉元件中的 .uk-light 或 .uk-dark 類別來套用淺色或深色，以獲得更好的可見性。

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

    <!-- The element which is wrapped goes here -->

    <a class="uk-position-center-left" href="" uk-slidenav-previous></a>
    <a class="uk-position-center-right" href="" uk-slidenav-next></a>

</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-slidenav-large uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slideshow-item="previous"></a>
    <a class="uk-slidenav-large uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slideshow-item="next"></a>

</div>