スライダー

レスポンシブなカルーセルスライダーを作成します。

スライダーコンポーネントは完全にレスポンシブで、タッチ操作とスワイプナビゲーション、そしてデスクトップ用のマウスドラッグをサポートしています。「前へ」と「次へ」のナビゲーションをクリックすると、ペースに合わせて加速することさえあります。すべてのアニメーションは、よりスムーズなパフォーマンスのためにハードウェアアクセラレーションが適用されています。

使用方法

このコンポーネントを適用するには、コンテナ要素に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％に設定されています。

コンテンツ

スライダーは画像に限定されません。テキスト、ビデオ、テキストオーバーレイ付きの画像、ケンバーンズエフェクトなど、あらゆるコンテンツを使用できます。カードコンポーネントを使用した例を次に示します。

見出し

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

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

<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`	ブール値	`false`	スライダーが自動再生されます。
`autoplay-interval`	数値	`7000`	7000
`自動再生モードでのスライド切り替えの間隔（ミリ秒）。`	ブール値	`false`	center
`ブール値`	ブール値	`false`	アクティブなスライドを中央揃えにします。
`draggable`	ブール値	`true`	ポインターのドラッグを有効にします。
`easing`	ブール値	`false`	文字列
`ease`	数値	`0`	アニメーションのイージング（CSSタイミング関数または三次ベジェ）。
`finite`	ブール値	`ブール値`	false
`無限スライドを無効にします。`	ブール値	`false`	index
`数値`	ブール値	`false`	0
`表示するスライダーアイテム。0から始まるインデックス。`	数値	`1`	clsActivated

JavaScript

文字列

uk-transition-active

UIkit.slider(element, options);

トランジションアクティブクラスを適用するスライダーアイテム（all、first）。

このコンポーネントがアタッチされている要素では、以下のイベントがトリガーされます。

名称	説明
`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のロール、状態、およびプロパティを自動的に設定します。

スライダーには、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キーを押すと、フォーカスが最初または最後のタブに移動します。

国際化

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

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

ドキュメント

スライダー

1

2

3

4

5

6

7

8

9

10

1

2

3

4

5

6

7

8

9

10

1

2

3

4

5

1

2

3

4

5

6

7

8

9

10

1

2

3

4

5

6

7

8

9

10

1

2

3

4

5

6

7

8

9

10

1

2

3

4

5

6

7

8

9

10

1

2

3

4

5

6

7

8

9

10

1

2

3