カルーセル要素

カルーセル要素について

その カルーセル要素 ユーザーがウェブサイト上で製品、画像、またはプロモーション コンテンツのカルーセルを作成して表示できるようにする特定の機能またはウィジェットを指します。カルーセル要素の主な機能と利点は次のとおりです。

• プロダクトショーケース: Eコマースのカルーセルでは、店舗の在庫商品がよく紹介されます。各スライドには、異なる商品のタイトル、画像、価格、そして簡単な説明が表示されます。
• プロモーションバナーカルーセル要素では、セール、割引、新着商品などのプロモーションバナーや広告も表示できます。
• カスタマイズ可能なレイアウト: ユーザーは通常、カルーセルのレイアウトをカスタマイズして、スライドごとに表示されるアイテムの数、スライド間のトランジション効果、ブランドの美観に合わせて全体的なスタイルなどの側面を調整できます。
• ナビゲーションコントロール: これには通常、ユーザーがカルーセル スライド間を手動で移動できるようにするための矢印やドットなどのナビゲーション コントロールが含まれます。
• 応答デザイン: 最新の Web デザインにおける他の要素と同様に、e コマース ページ ビルダーのカルーセル要素はレスポンシブに設計されており、さまざまなデバイスや画面サイズで正しく表示されます。

GemPages v7にカルーセル要素を追加する

ステップ 1： の中に GemPagesダッシュボードで、カルーセル要素を追加するページを選択します。 

ステップ 2: を検索します。 カルーセル要素、 希望するタイプを選択し、ページ上の希望の位置にドラッグします。

ステップ 3：D任意の GemPages 要素 (テキスト、画像、ボタン、製品など) をドラッグ アンド ドロップして、自由にレイアウトを構築します。

カルーセルの設定パネルにアクセスするには、要素をクリックするだけです。

すると左側のサイドバーに 設定 の三脚と 高機能 タブを使用して、その動作と外観をカスタマイズできます。

設定タブを構成する

スライドあたりの項目数

この設定は、各カルーセルスライド内に表示されるアイテムの数を制御します。プリセットのレイアウトオプションから選択するか、デザインのニーズに合わせてカスタム数を設定できます。

• プリセットレイアウト: 利用可能なグリッド オプションを使用して、スライドごとに 1 ～ 5 個の項目をすばやく選択します。
• カスタム値: 表示したい場合 5以上のアイテム、クリック ⚙️ 設定アイコン ご希望の正確な数を入力してください。これは、複数の商品を1つのビューで表示する商品カルーセルで特に便利です。

ディスプレイ

このセクションでは、各カルーセル スライド内でのアイテムの表示方法を調整して、デザインに最適なレイアウトと間隔を実現できます。

• 最大アイテム数: カルーセルに表示できるアイテムの最大数を定義します。最大で 12アイテム スライドごとに。
• 間隔： 各アイテム間の間隔を調整します。間隔を広げるとより広々としたレイアウトになり、間隔を狭めるとより多くのコンテンツを狭いデザインに収めることができます。
• プレビュー: このオプションを有効にすると、次のスライドまたは前のスライドの一部が表示されます。この視覚的なヒントにより、カルーセルにユーザーが閲覧できるアイテムがさらに含まれていることを視覚的に示せます。

アイテム管理

このセクションでは、スライドの追加/削除や、好みに応じて順序を変更するなど、カルーセル内のアイテムを管理できます。

• アイテムにマウスを合わせると、 リネーム, 複製 アイテム、または 削除 ボーマンは

• さらにアイテムを追加するには、「+ アイテムを追加

アイテム間隔

カルーセル内のアイテム間の間隔（ギャップ）を調整できます。デフォルトでは、ギャップは 16 px.

アイテムスタイル

このセクションでは、カルーセル内の各アイテム (またはスライド) の表示方法をカスタマイズできます。

これらの設定は、視覚的な一貫性を維持し、カルーセルの全体的な魅力を向上させるのに役立ちます。

• パディング： カルーセルの各アイテムの内側の間隔を調整します。コンテンツがアイテムの端に触れないように、上、下、左、右に異なる値を設定できます。

• 背景： カルーセル内の各アイテムの背景を定義します。以下のことが可能です。
  • ドロップダウンリストから ソリッドカラー (カラーピッカーを使用するか、HEX コードを入力)。
  • アップロードする 画像の背景 各アイテムに独自のビジュアルデザインを持たせたい場合。
• 境界： カルーセルアイテムの枠線を追加またはカスタマイズします。枠線の幅、色、スタイル（実線、破線など）をブランドのスタイルに合わせて変更できます。
• コーナー: カルーセルアイテムの角を丸くして、より柔らかい印象を与えます。値（ピクセル単位）は、角の丸み具合を決定します。
• Shadowカルーセルアイテムにドロップシャドウを適用して、背景から際立たせましょう。シャドウのサイズ、ぼかし、色、不透明度を調整して、お好みの奥行き感を実現できます。

ナビゲーション

このセクションでは、ナビゲーション矢印を使用してユーザーがカルーセル内を移動する方法のカスタマイズが可能です。

役職: ナビゲーション ボタンをカルーセル領域の内側に配置するか外側に配置するかを選択します。

ナビゲーションアイコン: ナビゲーション ボタンのアイコン スタイルを選択します。

• アイコン: デフォルトのオプションは矢印ですが、デザインに適した他のアイコンに変更できます。
• アイコン サイズ: プラスまたはマイナス ボタンを使用してアイコン サイズを調整するか、正確な値を入力して精密に制御します。
• アイコンの色: カルーセルの背景に対して目立つように、ナビゲーション アイコンの色を選択します。

ナビゲーションボタン: ナビゲーション ボタン (左矢印と右矢印) を変更して、ページ スタイルに合わせて視認性を高めます。

• ボタンのサイズ：[編集]をクリックすると、すべての設定が展開され、ナビゲーションボタンの幅と高さを調整できます。サイズを大きくすると、モバイルデバイスでのアクセシビリティが向上します。
• 背景: カルーセル コンテンツとのコントラストを高めるために、ボタンに背景色を追加します。
• 枠線：ボタンを目立たせるために枠線を適用します。スタイル、幅、色をカスタマイズできます。
• 角: ナビゲーション ボタンの角を丸くして、より柔らかい、または丸い形のスタイルを実現します。
• 端までのギャップ: ナビゲーション ボタンとカルーセルの端の間の距離を制御します。
• ホバー時に表示: ナビゲーション ボタンを常に表示するか (いいえ)、顧客がカルーセルの上にマウスを移動したときにのみ表示するか (はい) を選択します。

ドット

その ドット セクションでは、カルーセルの下部に表示されるナビゲーション ドットをカスタマイズして、訪問者が現在表示しているスライドを識別できるようにすることができます。

• 役職: カルーセルに対してドットを表示する位置を選択します。 内部 or 外側 スライドはデザインレイアウトに応じて異なります。
• アクティブカラー: 点の色を選択します。 現在の（目に見える） 滑り台。
• 非アクティブカラー: 異なる色を選択して、 隠されました スライド。
• ドットサイズ: プラス/マイナス ボタンを使用してドットのサイズを調整するか、ピクセル精度の正確な値を入力します。
• エッジまでの隙間: ドットとカルーセルの端の間の間隔を定義します。この値を大きくすると、視認性が向上したり、異なる画面サイズ間での間隔のバランスが取れたりします。

相互作用

カルーセル要素内のインタラクションをカスタマイズします。

• 自動再生: このスイッチを有効にすると、スライドが自動的に進みます。最適な機能を得るには、自動再生とループ機能を組み合わせます。両方の機能を有効にすると、スライドが自動的に進み、最初のスライドに戻ります。
• ディレイ： スライドを切り替えるまでの期間（ミリ秒単位）を設定します。
• ホバー時に一時停止: ユーザーがカルーセルの上にマウスを移動したときに自動再生を停止します。
• スライド方向: 左または右のスライドの動きを選択します。
• インフィニティループ: このスイッチを有効にすると、最後のスライドに到達した後、カルーセルが最初から繰り返されるようになります。 
• ドラッグ/スワイプ: このオプションを有効にすると、顧客はマウスを使用して次の画像にスライドできるようになります。 
• スライド速度カルーセル内のスライドの速度を編集します
• アニメーション: アニメーション効果（イーズイン、イーズアウト、イーズイン＆アウトなど）を選択します。カルーセル要素に適用したアニメーション効果をプレビューできます。

サイズ 

カルーセル要素の幅と高さをお好みに合わせてカスタマイズしてください。フル幅カルーセルを設定するには、以下の手順に従ってください。

• 作成セッションプロセスで 幅（Width） 〜へ 100% or 全幅。
• に行く 設定 > 配置 をクリックして センター or Stretch.

レイアウト構造で、カルーセル コンテナーのセクションまたは行も全幅に設定されていることを確認します。

経歴

カルーセル全体の背景を、ストアのデザインに合わせてカスタマイズできます。 単色/グラデーションカラーを選択する or 画像をアップロードする カルーセルの背景として使用します。

背景のカスタマイズの詳細については、 この記事.

形状 

このセクションでは、カルーセルの全体的な外観をカスタマイズして微調整することができます。 国境, コーナー半径, 影の効果これらの設定により、カルーセルをストアのレイアウトにシームレスに溶け込ませたり、強調表示されたセクションとして目立たせたりすることができます。

• ボーダー: カルーセルの周囲の境界線を追加または変更します。境界線は次のように定義できます。 厚さ, （実線、破線、点線）、および カラー あなたのブランドスタイルに合わせて。
• コーナー：調整する コーナー半径 カルーセルの角を丸くしたり、シャープにしたりできます。例えば、値を大きくすると、より柔らかくモダンな外観になります。
• Shadow：適用 影を落とす カルーセルに奥行き感とページの背景からの視覚的な分離感を与えます。影の調整も可能です。 オフセット, ブラー, カラー 微妙な効果や劇的な効果を実現します。

参照する この記事 境界線、角、影の設定を使用して図形を変更する方法の詳細なガイダンス。

整列

このセクションでは、次の 3 つのオプションから選択できます。 左揃え, 中心のまたは 右揃え.

詳細タブを設定する

より高度なカスタマイズについては、「詳細設定」タブに移動し、 この 記事.

カルーセル要素は、Shopifyストアにダイナミックでインタラクティブなビジュアル要素を追加できる多用途ツールです。GemPages v7では、各アイテムのスタイル、アニメーション、レイアウトを完全に制御できるため、あらゆるデバイスで訪問者を惹きつける、目を引く商品紹介やブランドストーリーを簡単に構築できます。

例えば、 移行効果 カルーセルの場合は、 詳細設定 カルーセル要素では、デフォルトの スライド への移行 フェード効果 より滑らかでエレガントなビジュアルを実現します。

適用するには、 高機能 タブで、 アニメーション セクションを選択し、 フェード トランジションタイプのドロップダウンから選択します。

フェード効果はシームレスに機能します 自動再生 の三脚と ループ各スライドを自動的にブレンドイン/ブレンドアウトできます。

カルーセル要素に関するよくある質問

1. カルーセルが全幅表示されないのはなぜですか?

ページに全幅のカルーセルを表示するには、次の操作を試してください。

• ジョブタイプが 幅 に設定されています 100% 設定 > サイズ.
• カルーセルが次のセクションまたは列に配置されていることを確認してください。 全幅にまたがる.
• 作成セッションプロセスで 配置 = 中央またはストレッチ in 設定 > 配置.
• カルーセルを狭い列またはネストされたセクション内に配置しないでください。

2. カルーセルが自動再生されないのはなぜですか?

カルーセルの自動再生を設定するには、次の手順に従います。

• に行く 設定 > インタラクション 確実に 自動再生 がオンになっています。
• ループを続けるには、 インフィニティループ.

3. カルーセルに商品を動的に表示できますか?

GemPagesでは、カルーセルは商品リスト要素のようにShopifyから商品データを自動取得しません。そのため、そうする必要があります 製品モジュールを手動でドラッグ カルーセルにカスタムコントロールを追加します。

4. 画像が切れたりずれたりするのはなぜですか?

カルーセル内で画像が切れて見える場合は、次の手順に従ってください。

• チェック 画像比率, パディングまたは スライド幅 設定を行います。
• 　 画像を合わせる 画像を埋める アスペクト比の維持を優先する場合。

5. GemPages カルーセルはフェードトランジション効果をサポートしていますか?

Yes. GemPages v7では、カルーセル要素には フェード効果 下 詳細設定 > アニメーション。 有効にする 自動再生 の三脚と インフィニティループ スライド間の連続的なフェードトランジションを実現します。

6. カルーセルのスライド時間を変更するにはどうすればよいですか?

に行く 設定 > インタラクション.

• Adjust ディレイ 各スライドが表示される時間を制御します。
• Adjust スライド速度 スライドの切り替え速度を制御します。

7.カルーセルに要素をドラッグ アンド ドロップできますか?