矢印とプログレスバー付きElementorカルーセルUIテンプレート
スマホ横スワイプUIで起きやすい問題例（気づかれない・件数が分からない）
矢印とプログレスバー付きElementor横スワイプカードのBefore After比較
Elementor横スワイプカードテンプレの対応環境と対応テーマ
Elementor横スワイプカードテンプレでできること一覧
PCはグリッド表示・スマホは横スワイプ表示に切り替わるElementorカードUI
矢印自動非表示とプログレスバーで操作性を改善したカルーセルUI
プログレスバーとPCグリッド切替に対応したElementor横スワイプカード
矢印とプログレスバー付きカルーセルUIの使用イメージ
Elementor横スワイプカードテンプレの導入手順（クラス追加・CSS・JS設定）
Elementor横スワイプカードテンプレのよくある質問

デモを見る

Elementor スマホ横スワイプカード（矢印・プログレスバー付き）

¥2,480

Elementorサイトにスマホ横スワイプカルーセルを設置できるテンプレートです。
横スワイプに矢印ボタンとプログレスバーを組み合わせ、ユーザーが横スクロールに気づかず離脱する問題を解決します。PCではグリッド、スマホ・タブレットではスワイプUIに自動で切り替わります。

矢印とプログレスバー付きの横スワイプカードの動きをデモサイトで確認できます

💡Elementorでスマホ横スワイプを「直感的なUI」にしたい方へ

スマホで横スワイプできるカードUIを作ったのに、ユーザーが「横にスクロールできること」に気づかれない ── そんな経験はありませんか？

本テンプレートは、スマホ・タブレットでの横スワイプに「左右の矢印ボタン」「プログレスバー」を組み合わせ、ユーザーが直感的に操作できるカルーセルUIを実装できるテンプレートです。

矢印ボタンの自動表示・非表示、プログレスバーの進捗連動、画面幅が狭いときのドラッグ操作、レスポンシブ自動切替まで、すべて解決済みの状態で提供します。クラスを付けてCSS・JSを貼るだけで、本格的なカルーセルUIをそのまま導入できます。

プラグイン不要・Elementor無料版で動作するため軽量で、カルーセルプラグインに不満を感じている方の代替としても使えます。

✅このテンプレートでできること

    • スマホ・タブレットで横スワイプ＋矢印ボタン＋プログレスバーを実装
    • PCでは自動でグリッド表示（3列／4列の選択可）に切り替え
    • 矢印ボタンが端で自動的に非表示になり、操作が直感的
  • プログレスバーで「全部で何件あるか・今どこを見ているか」を可視化
  • 連続バー／セグメントバーの2種類から選べるプログレスバー
  • 画面幅が狭いときはマウスドラッグでもスワイプ操作が可能（JS）
  • CSS変数22個でデザインを自由にカスタマイズ
  • Elementor無料版で動作（Pro不要）

📱矢印・プログレスバー付きカルーセルとは？

「横にスクロールできるカードUI」に、矢印ボタンとプログレスバーを組み合わせた操作UIのことです。

  • 矢印ボタン：左右にタップで進める／戻れる
  • プログレスバー：全体の中で「今どこを見ているか」を示す

表示は画面幅に応じて自動で切り替わります。PC（広い画面）ではグリッド表示、タブレット以下の幅ではスワイプ操作UIに切り替わるため、どの端末でも見やすいレイアウトを保てます。

注文住宅の施工事例、美容サロンのメニュー紹介、飲食店のおすすめメニュー、不動産の物件一覧など、「件数が多いカードコンテンツをスマホで見せたい場面」で特に効果を発揮します。

カードが8件以上ある場合、プログレスバーがあることで「全部で何件あるか」がひと目で伝わり、ユーザーが安心して最後まで閲覧できます。

🔍よくある実装との違い

横スワイプにユーザーが気づかない問題は、カルーセルプラグインで解決されることが多いですが、

  • 動作が重くなる
  • デザインの自由度が低い（ダサくなりがち）
  • 細かい調整がしづらい
  • Elementorのコンテナ構造に合わせるのが難しい

といった問題があります。

本テンプレートでは、

  • CSS（scroll-snap）＋軽量JSで動作するため高速
  • CSS変数22個で見た目を細かく調整可能
  • Elementorのコンテナ構造にそのまま対応
  • 矢印・プログレスバーの表示／非表示をクラスで切替

👉 「作れる」ではなく「作る手間をなくす」ためのテンプレートです

🙋‍♀️こんな方におすすめ

  • Elementorで施工事例・メニュー・商品一覧などのカードUIを作っている方
  • スマホで横スワイプを実装したのに、ユーザーに気づかれず困っている方
  • 矢印やプログレスバーを毎回自前で実装している方
  • カルーセルプラグインの重さ・デザインに不満を感じている方
  • 注文住宅・美容サロン・飲食店・不動産など、カードで魅せたい業態のサイトを制作している方

🛠導入は3ステップ＋任意1ステップ（貼るだけ）

  1. クラスを設定
    外側のコンテナに「mhd-carousel」、内側のコンテナに「mhd-carousel-track」、各カードに「mhd-carousel-item」を付与します。
  2. CSSを貼り付け
    外観 → カスタマイズ → 追加CSS（またはElementorのカスタムCSS）に貼り付けます。
  3. JSを貼り付け
    WPCode等の無料プラグインで、フッターにJSを貼り付けます。
  4. 【任意】オプションクラスを追加
    PC列数（mhd-cols-3／mhd-cols-4）やプログレスバーの種類（mhd-bar／mhd-bar-segment）を、外側のコンテナにクラスとして追加します。

導入手順はスクリーンショット付きの導入ガイドで詳しく解説しています。

⚙対応環境・前提条件

  • WordPress
  • Elementor（無料版で動作可能）
  • Container（Flexboxコンテナ）使用
  • JSを読み込むためのプラグイン（WPCode等の無料プラグインでOK）

🖥️動作確認環境

  • Windows：Chrome / Edge
  • Mac未確認
  • iOS：iPhone（Safari）実機確認済み
  • Android：Chrome 実機確認済み
  • 対応テーマ：Hello Elementor / Astra / Cocoon で動作確認済み

📖導入難易度・必要スキル

【導入難易度】★★☆☆☆（やや簡単）

  • WordPress / Elementorの基本操作ができる方
  • CSS・JSをコピー＆貼り付けできる方
  • WPCode等で、JSをフッターに読み込める方（解説付き）

💡シンプルな横スワイプカードをお探しの方へ

「矢印やプログレスバーは不要、もっとシンプルに横スワイプだけ実装したい」という方には、別商品の「スマホ横スワイプカードCSS」がおすすめです。
構造もシンプルで、CSSだけで動作するためより手軽に導入できます。
→ スマホ横スワイプカードCSSはこちら

💡Elementorでスマホ横スワイプを「直感的なUI」にしたい方へ

スマホで横スワイプできるカードUIを作ったのに、ユーザーが「横にスクロールできること」に気づかれない ── そんな経験はありませんか？

本テンプレートは、スマホ・タブレットでの横スワイプに「左右の矢印ボタン」「プログレスバー」を組み合わせ、ユーザーが直感的に操作できるカルーセルUIを実装できるテンプレートです。

矢印ボタンの自動表示・非表示、プログレスバーの進捗連動、画面幅が狭いときのドラッグ操作、レスポンシブ自動切替まで、すべて解決済みの状態で提供します。クラスを付けてCSS・JSを貼るだけで、本格的なカルーセルUIをそのまま導入できます。

プラグイン不要・Elementor無料版で動作するため軽量で、カルーセルプラグインに不満を感じている方の代替としても使えます。

✅このテンプレートでできること

    • スマホ・タブレットで横スワイプ＋矢印ボタン＋プログレスバーを実装
    • PCでは自動でグリッド表示（3列／4列の選択可）に切り替え
    • 矢印ボタンが端で自動的に非表示になり、操作が直感的
  • プログレスバーで「全部で何件あるか・今どこを見ているか」を可視化
  • 連続バー／セグメントバーの2種類から選べるプログレスバー
  • 画面幅が狭いときはマウスドラッグでもスワイプ操作が可能（JS）
  • CSS変数22個でデザインを自由にカスタマイズ
  • Elementor無料版で動作（Pro不要）

📱矢印・プログレスバー付きカルーセルとは？

「横にスクロールできるカードUI」に、矢印ボタンとプログレスバーを組み合わせた操作UIのことです。

  • 矢印ボタン：左右にタップで進める／戻れる
  • プログレスバー：全体の中で「今どこを見ているか」を示す

表示は画面幅に応じて自動で切り替わります。PC（広い画面）ではグリッド表示、タブレット以下の幅ではスワイプ操作UIに切り替わるため、どの端末でも見やすいレイアウトを保てます。

注文住宅の施工事例、美容サロンのメニュー紹介、飲食店のおすすめメニュー、不動産の物件一覧など、「件数が多いカードコンテンツをスマホで見せたい場面」で特に効果を発揮します。

カードが8件以上ある場合、プログレスバーがあることで「全部で何件あるか」がひと目で伝わり、ユーザーが安心して最後まで閲覧できます。

🔍よくある実装との違い

横スワイプにユーザーが気づかない問題は、カルーセルプラグインで解決されることが多いですが、

  • 動作が重くなる
  • デザインの自由度が低い（ダサくなりがち）
  • 細かい調整がしづらい
  • Elementorのコンテナ構造に合わせるのが難しい

といった問題があります。

本テンプレートでは、

  • CSS（scroll-snap）＋軽量JSで動作するため高速
  • CSS変数22個で見た目を細かく調整可能
  • Elementorのコンテナ構造にそのまま対応
  • 矢印・プログレスバーの表示／非表示をクラスで切替

👉 「作れる」ではなく「作る手間をなくす」ためのテンプレートです

🙋‍♀️こんな方におすすめ

  • Elementorで施工事例・メニュー・商品一覧などのカードUIを作っている方
  • スマホで横スワイプを実装したのに、ユーザーに気づかれず困っている方
  • 矢印やプログレスバーを毎回自前で実装している方
  • カルーセルプラグインの重さ・デザインに不満を感じている方
  • 注文住宅・美容サロン・飲食店・不動産など、カードで魅せたい業態のサイトを制作している方

🛠導入は3ステップ＋任意1ステップ（貼るだけ）

  1. クラスを設定
    外側のコンテナに「mhd-carousel」、内側のコンテナに「mhd-carousel-track」、各カードに「mhd-carousel-item」を付与します。
  2. CSSを貼り付け
    外観 → カスタマイズ → 追加CSS（またはElementorのカスタムCSS）に貼り付けます。
  3. JSを貼り付け
    WPCode等の無料プラグインで、フッターにJSを貼り付けます。
  4. 【任意】オプションクラスを追加
    PC列数（mhd-cols-3／mhd-cols-4）やプログレスバーの種類（mhd-bar／mhd-bar-segment）を、外側のコンテナにクラスとして追加します。

導入手順はスクリーンショット付きの導入ガイドで詳しく解説しています。

⚙対応環境・前提条件

  • WordPress
  • Elementor（無料版で動作可能）
  • Container（Flexboxコンテナ）使用
  • JSを読み込むためのプラグイン（WPCode等の無料プラグインでOK）

🖥️動作確認環境

  • Windows：Chrome / Edge
  • Mac未確認
  • iOS：iPhone（Safari）実機確認済み
  • Android：Chrome 実機確認済み
  • 対応テーマ：Hello Elementor / Astra / Cocoon で動作確認済み

📖導入難易度・必要スキル

【導入難易度】★★☆☆☆（やや簡単）

  • WordPress / Elementorの基本操作ができる方
  • CSS・JSをコピー＆貼り付けできる方
  • WPCode等で、JSをフッターに読み込める方（解説付き）

💡シンプルな横スワイプカードをお探しの方へ

「矢印やプログレスバーは不要、もっとシンプルに横スワイプだけ実装したい」という方には、別商品の「スマホ横スワイプカードCSS」がおすすめです。
構造もシンプルで、CSSだけで動作するためより手軽に導入できます。
→ スマホ横スワイプカードCSSはこちら

レビュー

レビューはまだありません。

“Elementor スマホ横スワイプカード（矢印・プログレスバー付き）” の口コミを投稿します

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

関連商品