レッスン内容
スライダーの構造
スライダーをキャンバスに追加すると、ドロップされた親要素全体の幅に広がります。
スライダーコンポーネントには4つの子要素があることが分かります。
- The Mask - 2つのデフォルトスライドを含みます
- The left arrow
- The right arrow
- The slide navigation
スライドの作成と切り替え
スライダーはデフォルトで2つのスライドが含まれており、3つの方法でスライドを追加できます：
- 任意のスライド要素を選択し、Element Settings Pane（ショートカット：D）に移動して「+ Add Slide」をクリックします。
- キャンバス上のスライドを右クリックし、複製を選択します。
- キャンバスまたはナビゲーターでスライドを選択し、複製するためにコピー＆ペーストします。
さらに、4つの方法でスライドを移動できます：
- スライダー設定内の矢印をクリックします。
- キャンバス上のスライドナビゲーションの点をクリックします。
- ナビゲーターパネル内のスライドをクリックします。
- スライダーを選択し、キーボードの左右矢印キーを押します。
スライダー設定内のスライドメニューを使用して特定のスライドに移動することも可能です。
スライドに背景画像を追加
画像要素をスライドにドラッグ＆ドロップするか、スライドに背景画像を追加して、上にコンテンツを配置できるようにすることができます。
- スライドを選択してクラスを作成します。
- 背景画像を追加します。
- 背景画像のサイズを「contain」に設定し、背景画像の位置を中央に設定します。
同じクラスを他のスライドに再利用すると、類似のスタイルを共有できます。また、各スライドに異なるコンボクラスを追加して背景画像を上書きすることもできます。
スライドに追加のコンテンツを追加する
スライドは、divブロックやセクションと同様に、他のコンポーネントを含むことができます。例えば、スライダーをbodyに配置した場合、スライド内にコンテナを追加し、その中に見出しや段落を配置することができます。
設定の構成
設定パネル(Settings Panel)（D）から、スライダーの動作を制御するためのさまざまな設定が用意されています。これには以下が含まれます。
Animation type - スライド間の移動時にスライドがどのように見えるかを設定します。
Easing method - スライド間の遷移のイージング方法を変更します。
Duration - スライドが別のスライドに移行するまでの時間を指定します。
Swipe gestures - タッチデバイスでのスワイプジェスチャーを有効または無効にします。スライドの特定のタイミングがデザイン上重要な場合は特に便利です。
Auto play- 最初のスライドが変わる（自動再生）までの時間と、スライダーがスライドの変更を完全に停止するまでのスライド数を設定します。
First and last slide arrows - 最初のスライドの左矢印と最後のスライドの右矢印をオフにする。
Slide nav controls - nav buttonsの間隔、shape、inverseを選ぶ。
高度なカスタマイズ
スライダー要素を好きなようにスタイルやカスタマイズすることができます。以下はスライダーをカスタマイズする一般的な方法のいくつかです。
スライダーのリサイズ
スライダーのサイズは、sliderを選択してスタイルパネルで高さを設定することで調整できます。このとき、背景画像がカバーに設定されている場合、背景画像も適切にリサイズされることに注意してください。
例えば、上記の例ではスライダーの高さをピクセル単位で変更しています。また、ビューポートの高さ（vh）に基づいて高さを設定することもできます。異なる幅と高さの単位について詳しく学ぶこともできます。
幅を調整は、スライダーを大きな親要素に移動したり、小さな親要素に移動したりすることでもできます。この例では、スライダーをセクションと同様に配置して、ページ全体の幅を占有するようにしています。
矢印アイコンのカスタマイズ
デフォルトでは、スライダーで使用される矢印は垂直に中央揃えされ、白い矢印アイコンとして表示されます。これらのアイコンの外観を調整するには、次の手順に従ってください。
- left arrow(左矢印)または**right arrow(**右矢印)を選択します。
- クラスを付与します。
- スタイルパネルでフォントサイズとフォントカラーのスタイルを編集します。フォントサイズはアイコンのサイズに影響を与え、フォントカラーは色に影響します。
もう片方の矢印に対しても同じ操作を行います。
矢印アイコンの置き換え
スライダー用に独自の矢印アイコンを使用したい場合、左矢印または右矢印要素内のアイコン要素を削除して、自分の画像を左矢印および右矢印要素にドラッグ＆ドロップします。
Pro tips；arrow wrappers（左矢印および右矢印）にフレックス設定を適用して、カスタム矢印アイコンを垂直に中央揃えにすることができます。
矢印要素のホバー状態をカスタム画像でスタイリングするには、透明度を変更したり、フィルターを使用したりすることができます。ホバー時に置き換え可能な背景画像も使用できます。
スライドナビゲーションのドット（点）のスタイリング
スライドナビゲーションの点をスタイリングすることは少し複雑です。ドットのサイズや数字のラベルのサイズをフォントサイズを更新することで変更できます。数字のラベルの色をフォントカラーを適用して変更できます。ただし、実際のドットや四角形の色を変更するには、custom embed要素内でいくつかのCSSを入力する必要があります。
- ドットのクラス = .w-slider-dot
- アクティブなドットのクラス = .w-slider-dot.w-active
スライドナビゲーションのドット、四角形の色を変更する
ドットの色を変更したい場合は、ページ内の埋め込み要素に次のように追加します。:
スライダー設定(slider settings) → スライドナビセクション( slide nav section )で、「角を丸める(rounded )」設定をオフにすることで、ドットを四角形に変更することができます。
ドット/スクエアの高度なスタイリング
ボーダーやその他のプロパティを使用してカスタムシェイプを作成することもできます。
この例では、以下のコードを貼り付けることで、selected/active状態を表す空のドットを作成する：
<style>
.w-slider-dot {
background: #4353FF !important;
border: 3px solid #4353FF !important;
}
.w-slider-dot.w-active {
color: #4353FF !important;
background: none !important;
border: 3px solid #4353FF !important;
}
</style>
すべてのアイコンのサイズを同じにするために、アクティブな状態でもアクティブでない状態でも同じボーダーを適用します。
スライド要素を隠す
デザインで使用したくない場合は、スライドのどの部分も隠すことができます。その方法は以下の通りです：
- スライドナビ要素または矢印を選択
- display settingを「none」にする
複数のスライドを一度に表示する
一度に複数のスライドを表示するカルーセルスライダーになるようにスライダー要素をカスタマイズすることもできます。ここでは一度に3つのスライドを表示するスライダーを作る方法を紹介します：
- スライダーを追加する
- すべてのスライドに同じクラスを与える
- クラスの幅をデスクトップでは33.33%、モバイルでは100%に設定する。
スライドを区別するためにスライドを編集する必要がある場合（例：異なる背景画像など）、各スライドに異なるコンボクラスを追加することができます。
コレクションアイテムでスライダーを構成する
現時点では、スライダーに動的コンテンツを自動的に入力することはできません。
回避策として、各スライドにコレクションリストを追加することができます。そして、そのリストに表示されるアイテムの数を制限して、コレクションアイテムを1つだけ表示します。
各スライドには、それ自身のコレクションリストが必要です。最初のコレクションリストを作成したら、スライドを複製できます。それから、各スライドのコレクションリストの "start at numberをスライド番号に対応するアイテムに変更するだけです（例：スライド1、アイテム1／スライド2、アイテム2）