カスタムコードを使用してカルーセルドットをナビゲーションボタン（矢印）に置き換える方法

デフォルトでは、 GemPagesのカルーセルナビゲーション として表示されます ドットインジケータードットは多くの場合うまく機能しますが、一部のユーザーは 左右の矢印ボタン より簡単なナビゲーションと、より現代的なユーザーエクスペリエンスを実現するため。

簡単なカスタムCSSコードを追加するだけで、ナビゲーション矢印の位置を変更し、デフォルトのドットスタイルのナビゲーションに代わる、よりすっきりとしたレイアウトを作成できます。 この記事では、 GemPagesでカルーセルのドットをナビゲーション矢印に置き換える カスタムコードを使用しています。

手順：カルーセルドットをナビゲーションボタンに置​​き換える方法

ナビゲーション矢印のレイアウトを適用するには、以下の手順に注意深く従ってください。

ステップ1：カルーセル要素を右クリックします

ページを開く GemPages エディター.

その後：

• 動画内で カルーセル要素
• カルーセル上で直接右クリックします
• 選択する カスタムコード

これが開きます CSSカスタムコードパネル.

ステップ2：最初の行からカルーセルクラスをコピーします

カスタムコードパネル内：

• 見る 一行目
• あなたは カルーセルクラス

このクラス名をコピーしてください。次のステップで使用します。

ステップ3：ナビゲーションボタンのコードを貼り付ける

以下のCSSをカスタムコードパネルに貼り付けてください。

.carouselID .gem-slider-previous {

 bottom: -40px !important;

 top: auto !important;

 left: calc(50% - 40px) !important;

}

.carouselID .gem-slider-next {

 bottom: -40px !important;

 top: auto !important;

 right: calc(50% - 40px) !important;

}

その後：

置換：

carouselID

を使用して：

ステップ2でコピーした実際のCarouselクラス。

その後：

• 詳しくはこちら Save
• プレビューを更新する
• ナビゲーションレイアウトを確認してください

ステップ4：[保存]をクリックして変更を適用します

コードの貼り付けが完了したら：

• 詳しくはこちら Save
• 必要に応じてページプレビューを更新してください

カルーセルナビゲーションに、スライダーの下に矢印ボタンが表示されるようになり、ナビゲーションがより分かりやすく、使いやすくなりました。