--- url: 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/layout/carousel-layout' title: 'カルーセルレイアウトを追加する | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T08:47:50+00:00' updated: '2026-10-24T09:09:48+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- 引用、お知らせ、告知などを1か所で交代に表示したい場合は、Carouselレイアウト エレメントを使います。最後には自動で進むスライドと各スライドのドットが 残ります。画像カルーセルとは 違い、各スライドには任意のエレメントが入ります。テキスト、画像、ボタンなど です。例では受講生の声のスライダーを作ります。 tags: - Lay-out image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T09:09:48+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: カルーセルレイアウトを追加する description: |- 引用、お知らせ、告知などを1か所で交代に表示したい場合は、Carouselレイアウト エレメントを使います。最後には自動で進むスライドと各スライドのドットが 残ります。画像カルーセルとは 違い、各スライドには任意のエレメントが入ります。テキスト、画像、ボタンなど です。例では受講生の声のスライダーを作ります。 image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T08:47:50+0000' dateModified: '2026-10-24T09:09:48+0000' author: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' mainEntityOfPage: 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/layout/carousel-layout' articleSection: Lay-out - '@type': WebPage '@id': 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/layout/carousel-layout' description: |- 引用、お知らせ、告知などを1か所で交代に表示したい場合は、Carouselレイアウト エレメントを使います。最後には自動で進むスライドと各スライドのドットが 残ります。画像カルーセルとは 違い、各スライドには任意のエレメントが入ります。テキスト、画像、ボタンなど です。例では受講生の声のスライダーを作ります。 breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: ホーム item: 'https://dxpr.com/ja' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: ja --- [Help Center](/ja/node/75)/[Documentation](/ja/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Build pages](/hc/documentation/learn-dxpr-builder/build) /[Add content](/hc/documentation/learn-dxpr-builder/elements) /[Lay-out](/hc/documentation/learn-dxpr-builder/layout/overview) # カルーセルレイアウトを追加する. Learn DXPR BuilderBuild pagesAdd contentLay-out ## In this guide Related guides - [Image Carousel](/hc/documentation/learn-dxpr-builder/elements/image-carousel) - [タブパネルを追加する](/ja/hc/documentation/learn-dxpr-builder/layout/tabs-element) - [Animation tab](/hc/documentation/learn-dxpr-builder/design/animation-tab) 引用、お知らせ、告知などを1か所で交代に表示したい場合は、Carouselレイアウト エレメントを使います。最後には自動で進むスライドと各スライドのドットが 残ります。[画像カルーセル](/hc/documentation/learn-dxpr-builder/elements/image-carousel)とは 違い、各スライドには任意のエレメントが入ります。テキスト、画像、ボタンなど です。例では受講生の声のスライダーを作ります。 ## カルーセルレイアウトを追加する 1. カラムにホバーしてコントロールバーの**+**をクリックし、 エレメントピッカーを開きます。 2. 開いて**Layout**タブで**Carousel**をクリックします。 3. 先に設定が開きます。既定値のまま**Save**をクリックします。 空のスライド1枚付きでカルーセルが現れます。 4. スライド内の**+**をクリックしてコンテンツを追加します (例: **Text**エレメント)。 5. スライドを追加するには、カルーセルにホバーしてコントロールバーの **Add slide**をクリックします。カルーセル下のスライドのドットを クリックして開き、同じように中身を入れます。 ## 表示結果 最初のスライドが表示され、その下に各スライドのバーが並びます。5秒ごとに 次のスライドが入ってきて、最後の後は最初に戻ります。訪問者はバーを クリックしてスライドに飛んだり、タッチ画面でスワイプしたりできます。全スライドが 最も高いスライドの高さになるので、下のコンテンツが跳ねません。 ## カルーセルの設定 設定は**More** > **Settings**から開きます。**Carousel**コントロールバーの**General**パネルに タイミングがあります。 | 設定 | 内容 | 既定値 | |---|---|---| | **Frames per slide** | 並べて表示するスライド数です。1から10まで。狭い画面では減り、携帯電話では1枚になります | 1 | | **Disable auto-play** | スライドの自動送りを止めます | Off | | **Auto-play interval** | スライド間の時間です。1000から20000ミリ秒まで | 5000 | | **Stop on hover** | ポインターがカルーセル上にある間は自動再生を止めます | Off | | **Dots navigation** | 対象は**Dots**パネルで、各スライドのドットを表示します | On | | **Next/Previous** | 対象は**Next/Previous**パネルで、矢印ボタンを表示します | Off | ### ドットと矢印 対象は**Dots navigation**がオンの場合で、**Dots**パネルには 次もあります。 - **Dots orientation**: **Outside slider** (下) または **Inside slider** - **Dot shape**: **Bar**、**Circle**、 **Square**、**Triangle** - **Active dot transformation**: **None**、 **Grow taller**、**Grow wider**、**Scale up** - **Dot color**と**Active dot color** 対象は**Next/Previous**がオンの場合で、**Next/Previous**パネルには次もあります。 - **Orientation**: **Outside slider**または **Inside slider** - **Dot shape**: 各矢印の後ろのボタン。 **No background**、**Circle**、**Square**、 **Bar** - **Icon color**、**Icon hover color**、 **Background color**、**Background hover color** - **Outside navigation position**: **Adjacent**、 **Top center**、**Top left**、**Top right**、 **Bottom center**、**Bottom left**、**Bottom right** ## スライド案 - **Testimonial slider**: 各スライドに引用文の **Block quote**と名前の**Text**エレメントを置きます。 **Dots navigation**はオン、**Next/Previous**はオフのまま、 **Auto-play interval**は7000にして訪問者が読み終われるようにします。 - **Hero carousel**: スライドの**More** > **Settings**を開き、**Style**パネルの**Background image**に 写真を選びます。見出しの**Text**エレメントと**Button**を 追加します。訪問者が読んでクリックできるよう**Stop on hover**を オンにします。 ## 表示されない場合 - **カルーセルの下にドットがありません。** ドットはスライドが 2枚以上ではじめて表示され、**Dots navigation**がオンの場合だけです。 **Add slide**をクリックするか、**Dots**パネルで **Dots navigation**をオンにします。 - **Add slide後も新しいスライドが出ません。** 新しいスライドは 末尾に追加され、開くまで隠れています。カルーセル下の最後のドットを クリックします。 - **スライドが自動で動きません。** **Disable auto-play**がオンです。カルーセル設定の **General**パネルでオフにします。 - **矢印がありません。** **Next/Previous**は既定で オフです。**Next/Previous**パネルでオンにします。 - **CarouselがピッカーのLayoutタブにありません。**DXPR Builderユーザープロファイルに含まれていません。管理者が**Carousel**を プロファイルの**Elements**下でチェックします (`/admin/dxpr_studio/dxpr_builder/profile`)。 ## 次はこちら - [画像カルーセル](/hc/documentation/learn-dxpr-builder/elements/image-carousel): 画像だけのスライドショーを1つのダイアログで設定します。 - [タブパネルを追加する](/ja/hc/documentation/learn-dxpr-builder/layout/tabs-element): 待たせる代わりに訪問者にコンテンツを選ばせます。 - [アニメーションタブ](/hc/documentation/learn-dxpr-builder/design/animation-tab): 各スライドのコンテンツに登場効果を付けます。