カルーセルレイアウトを追加する.
引用、お知らせ、告知などを1か所で交代に表示したい場合は、Carouselレイアウト エレメントを使います。最後には自動で進むスライドと各スライドのドットが 残ります。画像カルーセルとは 違い、各スライドには任意のエレメントが入ります。テキスト、画像、ボタンなど です。例では受講生の声のスライダーを作ります。
カルーセルレイアウトを追加する
- カラムにホバーしてコントロールバーの+をクリックし、 エレメントピッカーを開きます。
- 開いてLayoutタブでCarouselをクリックします。
- 先に設定が開きます。既定値のままSaveをクリックします。 空のスライド1枚付きでカルーセルが現れます。
- スライド内の+をクリックしてコンテンツを追加します (例: Textエレメント)。
- スライドを追加するには、カルーセルにホバーしてコントロールバーの 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)。
次はこちら
- 画像カルーセル: 画像だけのスライドショーを1つのダイアログで設定します。
- タブパネルを追加する: 待たせる代わりに訪問者にコンテンツを選ばせます。
- アニメーションタブ: 各スライドのコンテンツに登場効果を付けます。