ウィジェット(固定ページなどの編集ページでのElementorの機能)のうち、一般グループ – 画像カルーセルについて説明します。
画像カルーセルウィジェットを使用すると、ページに興味深くダイナミックなギャラリーを追加することができます。ビデオでは、ギャラリーイメージカルーセルと3カラムカルーセルの作成について説明しています。
各項目のタイトルをクリックすると詳細説明が表示されます。
サムネイルからフルサイズまで、画像のサイズを選択するか、カスタムサイズを入力してください。
一度に表示するスライドの数を1から10まで選択でき、デスクトップ、タブレット、モバイルデバイスで利用可能です。
:デスクトップ、タブレット、モバイルそれぞれで設定可能な項目です。
スワイプごとのスライドのスクロール数を設定します。
:デスクトップ、タブレット、モバイルそれぞれで設定可能な項目です。
「はい」または「いいえ」を選択します。
ナビゲーションの表示方法を矢印、ドット、両方、またはなしから選択します。
URL、メディアファイル、またはリンクなしへのリンクを設定します。
画像の下部にキャプションを追加します。
ユーザーがカルーセルの上にカーソルを置いたときに自動再生を一時停止するかどうかを選択します。
ユーザーがカルーセルを操作したときに自動再生を一時停止するかどうかを選択します。「はい」または「いいえ」を選択します。
スライドを自動的に回転させるには、「はい」または「いいえ」を選択します。
次のスライドがローテートを開始するまでの時間を設定します。ミリ秒単位なので、1000msは1秒に相当します。
カルーセルを無限に連続したループで表示します。
スライドアニメーションの速度をミリ秒単位で設定します。
スライドを左または右からローテートさせるかどうかを選択します。
画像を上、中、下のいずれかに垂直に配置します。
:デスクトップ、タブレット、モバイルそれぞれで設定可能な項目です。
スライド間の間隔を設定します。デフォルト (20px) またはカスタムを選択します (このオプションは、1 より大きい量が [コンテンツ] タブの [表示するスライド] に選択されている場合にのみ使用できます)
枠線の種類を選びます。
なし以外の場合:
枠線の角を丸くできます。
ドロップダウンをクリックしてアニメーションを選択します。
:デスクトップ、タブレット、モバイルそれぞれで設定可能な項目です。
Fading | Zooming | Bouncing | Sliding |
---|---|---|---|
Fade in | Zoom in | Bounce in | |
Fade in Down | Zoom in Down | Bounce in Down | Slide in Down |
Fade in Left | Zoom in Left | Bounce in Left | Slide in Left |
Fade in Right | Zoom in Right | Bounce in Right | Slide in Right |
Fade in up | Zoom in Up | Bounce in Up | Slide in Up |
Rotating | Attention Seekers | Light Speed | Specials |
---|---|---|---|
Rotate in | Bounce | Light Speed in | Roll in |
Rotate in Down Left | Flash | ||
Rotate in Down Right | Pulse | ||
Rotate in Up Left | Rubber Band | ||
Rotate in Up Right | Shake | ||
Head Shake | |||
Swing | |||
Tada | |||
Wobble | |||
Jello |
1つ目の色を選択します。
1つ目の色の位置を選択します。
2つ目の色を選択します。
2つ目の色の位置を選択します。
グラデーションの種類を選択します。
タイプ:線状を選んだ際の角度を設定します。
タイプ:放射状を選んだ際の位置を選択します。
ボーダー(枠線)タイプを選択します。
枠線の角を丸くできます。
:デスクトップ、タブレット、モバイルそれぞれで設定可能な項目です。
デスクトップ表示のとき、このセクションを表示または非表示にするかを設定します。
注:レスポンシブ表示はプレビューやライブページでのみ有効で、Elementor での編集中は使えません。
タブレット表示のとき、このセクションを表示または非表示にするかを設定します。
注:レスポンシブ表示はプレビューやライブページでのみ有効で、Elementor での編集中は使えません。
モバイル表示のとき、このセクションを表示または非表示にするかを設定します。
注:レスポンシブ表示はプレビューやライブページでのみ有効で、Elementor での編集中は使えません。
のメッセージが出てPRO版の利用をアナウンスします。属性を満たす
Attributes では、任意の要素にカスタム HTML 属性を追加することができます。
のメッセージが出てPRO版の利用をアナウンスします。カスタム CSS のご紹介
カスタム CSS を使用すると、任意のウィジェットに CSS コードを追加して、エディタでライブ表示することができます。