カスタムコードを使用してカルーセルの矢印を非表示にする方法

カルーセル内のスライド間を移動する際に、カルーセル矢印が役立ちます。しかし、よりすっきりとしたデザインを実現するために、左矢印、右矢印、あるいは両方を非表示にしたい場合もあるでしょう。

この記事では、コーディングの知識がなくても、シンプルなカスタムCSSコードを使ってGemPagesのカルーセル矢印を非表示にする方法をご紹介します。

カルーセルの矢印を非表示にするべきタイミングは？

以下は、カルーセルの矢印を非表示にすることで、ストアのデザインとユーザーエクスペリエンスを向上させることができる一般的な使用例です。

1. よりすっきりとしたモバイルレイアウトを作成する

画面が小さい場合、矢印がスペースを取りすぎたり、コンテンツと重なったりすることがあります。矢印を非表示にすることで、カルーセルがすっきりとして見やすくなります。

2. 手動操作ではなく自動再生を使用する

カルーセルがアイテム間を自動的にスライドする場合、訪問者は手動でのナビゲーション矢印を必要としない可能性があります。

3. ミニマルなデザインを構築する

一部のブランドは、ナビゲーションコントロールが目立たない、すっきりとしたモダンな外観を好む。

4. 手動スライドを防止する

プロモーションセクションや告知スライダーなどでは、ユーザーが矢印をクリックすることなく、コンテンツを固定された順序で閲覧できるようにしたい場合があります。

5. 代替のナビゲーション方法を使用する

あなたは既に以下を使用しているかもしれません：

• ドットナビゲーション
• モバイル端末でのスワイプ操作
• 自動スクロール機能

このような場合、矢印は不要になる可能性がある。

GemPagesでカルーセル矢印を非表示にする方法

ステップ1：カルーセル要素を選択します

GemPagesエディター内で、非表示にしたい矢印が含まれているカルーセル要素をクリックします。

ステップ2：カスタムコードパネルを開く

カルーセル要素を右クリックして、 カスタム額装.

カスタムコードパネルが表示されます。

ステップ3：カスタムCSSコードを追加する

1. 左矢印を非表示にする

「カスタムコード」フィールドに以下のコードを追加してください。

.gTgcgeWuMC .gem-slider-previous{

 不透明度：0！重要;

 可視性: 非表示!重要;

}

2. 右矢印を非表示にする

右矢印を非表示にするには、以下のコードを追加してください。

.gTgcgeWuMC .gem-slider-after{

 不透明度：0！重要;

 可視性: 非表示!重要;

}

注意：

交換する .gTgcgeWuMC 実際のカルーセル要素IDを使用してください。

要素IDは、カスタムコードパネルの上部に表示されます。