> ## Documentation Index
> Fetch the complete documentation index at: https://docs.kameleoon.com/llms.txt
> Use this file to discover all available pages before exploring further.

# ウィジェットにスライダーを追加する

> ウィジェットにスライダー要素を追加し、スライドの編集、位置の設定、トランジションアニメーションや自動再生動作のカスタマイズを行います。

ウィジェットにスライダーを追加して、より動的にすることができます。

本記事では、次の方法を学びます。

* スライダーの追加
* スライダーの編集
* スライダーの配置
* スライド間のトランジションのカスタマイズ

## スライダーを追加する

スライダーを追加するには:

1. 左サイドバーで **Add element** をクリックします。
2. リストで **Media** セクションを展開します。
3. **Slider** をクリックします。スライダーを編集できる新しいパネルが開きます。

## スライダーを編集する

スライダーにはデフォルトで 3 つのスライドが含まれていますが、さらに追加できます。**Add new slide** をクリックします。

<Frame>
  ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-a-widget-with-the-widget-studio/add-a-slider-to-your-widget/ezgif.com-video-to-gif-1.gif)
</Frame>

スライダーを編集するには **Edit** をクリックします。

## スライダーを配置する

スライダーをウィジェット内の好きな場所に配置できます。

<Frame>
  ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-a-widget-with-the-widget-studio/add-a-slider-to-your-widget/ezgif.com-video-to-gif-6.gif)
</Frame>

## スライド間のトランジションをカスタマイズする

スライド間のトランジションをカスタマイズできます。

**Slider Animation** をクリックして、速度を調整し、トランジション効果を選び、タッチ操作を有効にします。

<Frame>
  ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-a-widget-with-the-widget-studio/add-a-slider-to-your-widget/ezgif.com-video-to-gif-3.gif)
</Frame>

スライドを自動的に切り替えたい場合は、**Autoplay** を有効にします。

前後の矢印やページネーションも編集できます。

<Frame>
  ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-a-widget-with-the-widget-studio/add-a-slider-to-your-widget/ezgif.com-video-to-gif-5.gif)
</Frame>
