スライドショー

画像や動画を使ったレスポンシブなスライドショーを作成します。

スライドショーコンポーネントは完全にレスポンシブで、タッチおよびスワイプナビゲーション、デスクトップでのマウスドラッグをサポートしています。スライド間をスワイプすると、アニメーションは文字通り指先またはマウスカーソルにくっつきます。前後のナビゲーションをクリックすると、ペースに合わせて加速します。すべてのアニメーションは、よりスムーズなパフォーマンスのためにハードウェアアクセラレーションされています。

使い方

このコンポーネントを適用するには、コンテナ要素に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プロパティに必要なアニメーション値を持つオプションを追加します。少なくとも1つの開始値と終了値を定義します。これは、コンマで区切られた2つの値を渡すことで実行できます。

この機能はパララックスコンポーネントから継承されており、スライドショーアニメーションのスクロール位置に応じて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までアニメーション化を続けます。これは、開始値と終了値の距離が同じであるために機能します。異なる距離の場合、3つの値が必要です。開始（スライドがアニメーション化される）、中間（スライドが中央に配置される）、終了（スライドがアニメーション化される）。

<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`	ブール値	`ブール値`	ポインターのドラッグを有効にします。
`easing`	文字列	`文字列`	アニメーションのイージング（CSSタイミング関数またはcubic-bezier）。
`finite`	ブール値	`false`	無限スライドを無効にします。
`pause-on-hover`	ブール値	`ブール値`	マウスオーバー時に自動再生モードを一時停止します。
`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`	アイテムの非表示アニメーションが完了した後に発生します。

メソッド

コンポーネントには、以下のメソッドが利用可能です。

Show

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

スライドショーアイテムを表示します。

startAutoplay

UIkit.slideshow(element).startAutoplay();

スライドショーの自動再生を開始します。

stopAutoplay

UIkit.slideshow(element).stopAutoplay();

スライドショーの自動再生を停止します。

アクセシビリティ

Slideshowコンポーネントは、カルーセルWAI-ARIAデザインパターンに準拠しており、適切なWAI-ARIAのロール、ステート、プロパティを自動的に設定します。

スライドショーには、aria-roledescriptionプロパティにcarouselが設定されています。
スライドリストには、ID、presentationロール、およびaria-liveプロパティが設定されています。
スライドには、ID、スライドショーに「前へ/次へ」ナビゲーションしかない場合はgroupロール、タブナビゲーションがある場合はtabpanelロール、aria-roledescriptionプロパティにslide、そしてaria-labelプロパティが設定されています。

タブナビゲーションは、タブパターンに準拠しています。

タブナビゲーションには、tablistロールが設定されています。
タブナビゲーションアイテムには、presentationロールが設定されています。
タブナビゲーションリンクには、tabロール、aria-selectedステート、それぞれのスライドのIDに設定されたaria-controlsプロパティ、そしてaria-labelプロパティが設定されています。

「前へ/次へ」ナビゲーションは、ボタンパターンに準拠しています。

「前へ/次へ」ナビゲーションアイテムには、aria-labelプロパティ、スライドリストのIDに設定されたaria-controlsプロパティ、そして<a>要素が使用されている場合は、buttonロールが設定されています。

キーボード操作

スライドショーコンポーネント内のいずれかの要素にフォーカスが当たると、自動再生が停止します。タブナビゲーションは、次のキーを使用してキーボードからアクセスできます。

tabまたはshift+tabキーは、タブナビゲーション内のアクティブなタブにフォーカスを移動します。フォーカスがすでにアクティブなタブにある場合、フォーカスはタブナビゲーションの外側の次の要素に移動します。
向きに応じて、左/右矢印または上/下矢印キーは、タブ間を移動します。対応するスライドが自動的にアクティブになります。フォーカスが最後のタブにある場合、最初のタブに移動します。
homeまたはendキーは、フォーカスを最初のタブまたは最後のタブに移動します。

国際化

Slideshowコンポーネントは、次の翻訳文字列を使用します。コンポーネントの翻訳について詳細はこちらをご覧ください。

キー	デフォルト	説明
`next`	`次のスライド`	次のスライドボタンの`aria-label`。
`previous`	`前のスライド`	前のスライドボタンの`aria-label`。
`slideX`	`スライド %s`	ページネーションスライドボタンの`aria-label`。
`slideLabel`	`%s / %s`	スライドの`aria-label`。

ドキュメント

スライドショー

中央

下部

オーバーレイ下部

オーバーレイ下部右

見出し

見出し

見出し

見出し

見出し

見出し

下部

下部

左