メインコンテンツへスキップ

ドキュメント

スライドナビゲーション

スライドショーをめくるための「前へ」「次へ」ボタンによるナビゲーションを定義します。

使用方法

「前へ」「次へ」ボタンでナビゲーションを作成するには、`<a>`要素に`uk-slidenav`属性を追加します。属性に`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>