このチュートリアルでは、ステートとインタラクションを使って、以下の3種類のカルーセルの作成方法をご紹介します。:

https://youtu.be/HO5C47sX-Lc

→このチュートリアルで使用されているサンプルのダウンロードはこちらより

デザインを準備する

  1. UXPinでプロトタイプを開き、左側のクイックツールバーにあるBoxで、キャンバスに正方形を追加します。この正方形を３つ複製して同じものを作ります。
  2. プロパティパネルのIMAGE FILL（画像を挿入）をクリックするか、トップバーにあるFill with data（データを挿入）をクリックして、画像を挿入します。
  3. すべての長方形をドラッグして選択し、ショートカット ⌘ + G、またはトップバーからGroup（グループ化）します。
  4. 次に、プロパティパネルの Crop selected content（選択されたコンテンツを切り抜く） のチェックを外して、スライドを切りとります。

https://uxpincommunity.cdn.prismic.io/uxpincommunity%2Fa735454a-8b55-4b54-816c-6560dc54d011_01_cropcontent.mp4

  1. トップバーにある Add State（ステートの追加）クリックします。ここでスライドの数のステートを追加していきます。

  2. New state（新しいステートを作成する）をクリックしてState 3を作成し、ステートの名前を入力してEnterを押します。

  3. State 2をクリックして、３つすべてのスライドをまとめて移動させ、2枚目のスライドが青色の枠内に入るようにドロップします。State 3に切り替えて、3枚目のスライドも同様にします。

https://uxpincommunity.cdn.prismic.io/uxpincommunity%2F8da82725-d855-4bb1-8920-3ce8f4cb1eeb_02_newstates.mp4

<aside> 💡 ヒント カルーセルの作成では、各スライドで好きなコンテンツを入れることができ、スライドの数だけステートを作成できます。

</aside>

矢印ボタンを持つカルーセル

  1. **Quick tool（クイックツールバー）**メニューから2つのアイコンを追加します。プロパティパネルのICONS（アイコン） セクションから、「↑」「↓」矢印を選択します。このアイコンが他のステートでも表示されるように、必ずベースステート（旗アイコン）でアイコンを追加してください。