スライダーとは?
複数の画像や文字を順番に表示させることにより、1つのエリアで複数の情報を見せることができる、スライドショー機能です。
スライダーを作成
![スライダーで使用する画像を用意する](https://design-baum.jp/files/2022/06/image11-1-1024x239.jpg)
今回は3枚のイメージを用意しました。Slider01のイメージにはスライドボタンも付けておきます。
![スライダーで使用する画像を用意する_スライドボタン](https://design-baum.jp/files/2022/06/image13-1024x239.jpg)
スライドイメージの大きさに合わせて、3枚のイメージをマスクします。
![スライドイメージをマスクしてコンポーネントしステート設定_マスク](https://design-baum.jp/files/2022/06/image10-1.png)
マスクした画像をコンポーネント設定します。
右クリックでメニューバーを表示して「コンポーネントにする」からできます。
<ショートカットキー>
Mac
Command+K
Windows
Control+K
![スライドイメージをマスクしてコンポーネントしステート設定_コンポーネントにする](https://design-baum.jp/files/2022/06/image9-2.png)
その後、右側のメニューバーにある初期設定のステートから、新規ステートをクリックし、2つ追加します。
![スライドイメージをマスクしてコンポーネントしステート設定_新規ステート](https://design-baum.jp/files/2022/06/image6-13.png)
ステートのSlider02を選択します。選択した状態で、イメージのマスクをSlider02の画像に合わせるように調節します。Slider03も同じように調節します。
![ステート設定_Slider02を選択](https://design-baum.jp/files/2022/06/image2-9.png)
![ステート設定_Slider02を選択_調節](https://design-baum.jp/files/2022/06/image1-12.png)
![ステート設定_Slider02を選択_Slider03も同じように調節](https://design-baum.jp/files/2022/06/image5-11.png)
これで、コンポーネントにステートの設定が完了しました。
![ステート設定_Slider01](https://design-baum.jp/files/2022/06/image3-1.jpg)
![ステート設定_Slider02](https://design-baum.jp/files/2022/06/image7-8.jpg)
![ステート設定_Slider03](https://design-baum.jp/files/2022/06/image14.jpg)
それぞれのステートの矢印ボタンにプロトタイプで移動先を設定していきます。
![アニメーションを設定する_プロトタイプ](https://design-baum.jp/files/2022/06/image15-1.png)
トリガーはタップ、移動先は次のスライドイメージ、アクションの種類はお好みでお選びください。スライドの仕方が選べます。現在設定しているトランジションは、フワッと次のイメージに変更してくれます。
![アニメーションを設定する_トリガーはタップ](https://design-baum.jp/files/2022/06/image4-7.jpg)
プレビューでイメージの矢印をクリックして動作確認してください。
スライドの仕方の変更は先ほど説明したアクションの種類からいろいろ試してみてください。
![プレビューでアクションの動作確認_Slider01](https://design-baum.jp/files/2022/06/image8-6.png)
![プレビューでアクションの動作確認_Slider02](https://design-baum.jp/files/2022/06/image16-1.png)
![プレビューでアクションの動作確認_Slider03](https://design-baum.jp/files/2022/06/image12-2.png)
まとめ
ステートを使ったスライダーをご紹介させていただきました。
このステート機能を使用すると、ボタンのホバーやチェックボックスなどに応用でき、デザインの幅が広がります。ぜひ活用してみてください。