Adding a Carousel Layout
Use the Carousel layout element when you want content to take turns in one spot, such as quotes, offers or announcements. You end up with slides that advance on their own, with a dot for each slide. Unlike the Image carousel, each slide holds any elements: text, images, buttons and more. The example builds a slider of student quotes.
Add a carousel layout
- Hover the column and click + in its control bar to open the element picker.
- In the Layout tab, click Carousel.
- Its settings open first. Click Save to keep the defaults. The carousel appears with one empty slide.
- Click + inside the slide and add content, such as a Text element.
- To add a slide, hover the carousel and click Add slide in its control bar. Click the slide's dot below the carousel to open it, then fill it the same way.
What you see
The first slide shows with a bar for each slide below it. Every 5 seconds the next slide moves in, and after the last one the first comes back. Visitors can click a bar to jump to a slide or swipe on a touch screen. Every slide takes the height of the tallest one, so the content below the carousel does not jump.
Set up your carousel
Open the settings from More > Settings in the Carousel control bar. The General panel holds the timing.
| Setting | What it does | Default |
|---|---|---|
| Frames per slide | How many slides show side by side, from 1 to 10. Narrow screens show fewer, down to one on phones | 1 |
| Disable auto-play | Stops the slides from advancing on their own | Off |
| Auto-play interval | Time between slides, from 1000 to 20000 milliseconds | 5000 |
| Stop on hover | Pauses auto-play while the pointer is over the carousel | Off |
| Dots navigation | In the Dots panel: shows a dot for each slide | On |
| Next/Previous | In the Next/Previous panel: shows arrow buttons | Off |
Dots and arrows
With Dots navigation on, the Dots panel also offers:
- Dots orientation: Outside slider (below it) or Inside slider
- Dot shape: Bar, Circle, Square or Triangle
- Active dot transformation: None, Grow taller, Grow wider or Scale up
- Dot color and Active dot color
With Next/Previous on, the Next/Previous panel also offers:
- Orientation: Outside slider or Inside slider
- Dot shape: the button behind each arrow, No background, Circle, Square or Bar
- Icon color, Icon hover color, Background color and Background hover color
- Outside navigation position: Adjacent, Top center, Top left, Top right, Bottom center, Bottom left or Bottom right
Slide ideas
- Testimonial slider: put a Block quote with the quote and a Text element with the name on each slide. Keep Dots navigation on and Next/Previous off, and set Auto-play interval to 7000 so visitors can finish reading.
- Hero carousel: open a slide's More > Settings and pick a photo as Background image in its Style panel. Add a Text element with the heading and a Button. Switch on Stop on hover so visitors can read and click.
If you don't see it
- There are no dots below the carousel. Dots only show once the carousel has two slides, and only with Dots navigation on. Click Add slide, or switch Dots navigation on in the Dots panel.
- The new slide does not show after Add slide. New slides are added at the end and stay hidden until you open them. Click the last dot below the carousel.
- The slides do not move on their own. Disable auto-play is on. Switch it off in the General panel of the carousel settings.
- There are no arrows. Next/Previous is off by default. Switch it on in the Next/Previous panel.
- Carousel is missing from the Layout tab of the picker. Your DXPR Builder user profile leaves it out. An administrator ticks Carousel under Elements in your profile at
/admin/dxpr_studio/dxpr_builder/profile.
What's next?
- Image carousel: a slideshow of images only, set up in one dialog.
- Adding a Tabs Panel: let visitors pick the content instead of waiting for it.
- Animation tab: add entrance effects to the content of each slide.