This page shows you how to add the Advanced Carousel module to your page and explains every setting. This module shows a large slide with a title, text and button next to a row of image cards. When the active card changes, the background image and the content change with it. You can choose between three layouts and slide the cards sideways or up and down. For more details, view the demo.

Note: This module works with Divi 5 only. If you don’t see it in the module list, go to Divi Extended → Divi Plus → General → Modules, turn on Advanced Carousel and save.

How to add the module

1. Open your page in the Divi Visual Builder.
2. Click the (+) icon inside a row to add a new module.
3. Search for DP Advanced Carousel in the module search box.
4. Click the module to insert it. Its settings open on the right.

Content tab

The Content tab of the main module holds the carousel items and the settings for the whole carousel: the layout, the cards and how the slider moves.

Content tab: Display

• Layout: Here you can choose the layout of the carousel. Options: Content + cards, Centered focus and Full slide.
• Direction: Choose whether the carousel moves horizontally or vertically. It can be set for each device, for example horizontal on phones so vertical swiping does not get in the way of page scrolling. Options: Horizontal and Vertical.
• Content position: Here you can choose on which side the content is displayed. Options: Left and Right.
• Background follows active slide: Here you can choose whether or not the carousel background changes to the active slide image.
• Content animation: Here you can choose the animation used when the slide content appears. Options: Fade up, Slide in, Zoom and None.
• Disable lazy loading: Whether or not to lazy load the slide images. Applies to all slides.

Content tab: Cards

• Card style: Here you can choose how the cards are displayed. Options: Flat and Coverflow.
• Cards per view: Here you can choose how many cards should be visible at once. Use a half-step value (e.g. 2.5) to let neighboring cards peek into view.
• Number of slides per group: Here you can choose the number of slides per group to slide by.
• Space between cards: Move the slider or input the value to increase or decrease the space between cards.
• Inactive card scale: Here you can control the size of the cards that are not currently active, relative to the active card.
• Inactive card opacity: Here you can control the opacity of the cards that are not currently active.
• Badge position: Here you can choose where the badge is placed on the cards. A badge only appears on cards where you have entered a badge text. Options: Top left, Top right, Bottom left and Bottom right.
• Click a card to select it: Here you can choose whether or not clicking a card moves the carousel to that slide.

Content tab: Slider

• Main slide effect: Here you can choose the transition effect of the large background image (or of the slides in the Full Slide layout). Options: Fade, Slide, Zoom, Cube and Flip.
• Enable loop: Here you can enable loop for the slides.
• Autoplay: This controls the auto play of the carousel.
• Autoplay delay: Here you can input the value to delay autoplay after a complete transition of the slider.
• Pause on hover: Here you can choose whether or not to pause slides on mouse hover.
• Transition duration: Here you can specify the duration of transition for each slide in milliseconds.
• Enable mousewheel: Here you can choose whether or not the mousewheel moves the carousel while the pointer is over it. This prevents the page from scrolling there.

Content tab: Slider navigation

• Show arrows: Here you can choose whether or not to display previous and next arrow on the slider.
• Previous arrow: Here you can select the icon to be used for the previous slide navigation.
• Next arrow: Here you can select the icon to be used for the next slide navigation.
• Show arrows on hover: Choose whether or not the previous and next arrows should be visible only on hover.
• Arrows position: Here you can choose the arrows position. On tablet and phone, or next to a left or right pagination, Inside and Outside arrows are shown as a bottom row at both edges so they never cover the content or the pagination. Options: Inside, Outside, Top left, Top right, Top center, Bottom left, Bottom right and Bottom center.
• Show pagination: This setting will turn on and off the pagination of the slider.
• Pagination style: Here you can choose the pagination style. Options: Solid dot, Transparent dot, Stretched dot, Line, Rounded line, Squared dot, Number dot, Title label and Progress bar.
• Pagination position: Here you can choose where the pagination is displayed. Options: Left, Right, Top and Bottom.
• Enable dynamic dots: This setting will turn on and off the dynamic pagination of the slider. It works for the dot styles that are plain dots or numbers, in any direction and pagination position.

Carousel item settings

Each slide is a separate item. Click + Add New Item in the Content tab to add a slide, or click the gear icon next to an item to edit it. Drag the items to change their order. The item holds the big content (image, title, text and button) and the small card (card title, subtitle and badge).

Item tab: Content

• Content title: Here you can input the title displayed in the content area when this slide is active.
• Image: Here you can upload the image for this slide. It is used for both the large image and the thumbnail card.
• Image alt text: Here you can input the text to be used for the image as HTML ALT text.
• Content: Here you can input the description displayed in the content area when this slide is active.
• Show icon: Here you can choose whether or not to display an icon above the content title.

Item tab: Card

• Card title: Here you can input the title displayed on the card. The Centered Focus layout does not show it on the card; it is then only used as the pagination label when the Content Title is empty.
• Card subtitle: Here you can input the subtitle displayed on the card.
• Badge text: Here you can input a short badge text (e.g. New, Featured) displayed on this thumbnail card only. Leave empty for no badge.
• Use different thumbnail image: Here you can choose whether or not the thumbnail card uses its own image. When off, the card uses the slide image.

Item tab: Button

• Show button: Here you can choose whether or not to show the button.
• Button text: Here you can input the text to be used for the button.
• Button link URL: Here you can input the destination URL for the button to open when clicked.
• Button link target: Here you can choose whether or not your link opens in a new window. Options: In the same window and In the new tab.

Each item also has its own Design tab, so you can style one item differently from the rest: card title, card subtitle, badge, overlay, content title, content text and button, plus the standard Divi spacing, border, box shadow, filters and transform settings.

The Link, Background and Meta groups are the standard Divi options.

Design tab

The Design tab styles the whole carousel: the overlays, cards, card text, badge, content icon, content title and text, button, content box, arrows and pagination.

Design tab: Carousel

• Minimum height: Move the slider or input the value to increase or decrease the minimum height of the carousel.

Design tab: Overlay

• Main image overlay background: Adjust the background style of this element by customizing the background color, gradient, image, video, pattern and mask.
• Main image overlay background color
• Card overlay background: Adjust the background style of this element by customizing the background color, gradient, image, video, pattern and mask.
• Card overlay background color

Design tab: Cards

• Card height: Move the slider or input the value to increase or decrease the height of the cards. In the vertical direction the cards share the carousel height instead.

Design tab: Card title

Use the standard Divi text settings (font, weight, size, color, line height, letter spacing, alignment and more) to style the card title.

Design tab: Card subtitle

Use the standard Divi text settings (font, weight, size, color, line height, letter spacing, alignment and more) to style the card subtitle.

Design tab: Badge

• Badge background color: Here you can select the background color of the badge.

Design tab: Content icon

• Icon size: Here you can choose the size of the content icon.
• Icon color: Here you can define a custom color for the content icon.

Design tab: Content title

Use the standard Divi text settings (font, weight, size, color, line height, letter spacing, alignment and more) to style the content title.

Design tab: Content text

Use the standard Divi text settings (font, weight, size, color, line height, letter spacing, alignment and more) to style the content text.

Design tab: Button

Use the standard Divi button settings (text, background, border, font, icon and spacing) to style the button.

Design tab: Content box

• Background color: Here you can select background color for the content box.

Design tab: Slider arrows

• Arrow font size: Here you can choose the arrow font size.
• Arrow color: Here you can define color for the arrow.
• Arrow background: Here you can define the background color of the arrow.
• Arrows border radius: Here you can control the corner radius of this element. Enable the link icon to control all four corners at once, or disable to define custom values for each.

Use the standard Divi spacing and border settings to style the slider arrows.

Design tab: Slider pagination

• Active pagination color: Here you can define color for the active pagination item.
• Inactive pagination color: Here you can define color for the inactive pagination items.
• Pagination text color: Here you can define the color of the number or title inside the active pagination item.

The Sizing, Spacing, Border, Box shadow, Filters, Transform and Animation groups are the standard Divi design options. The spacing group also has Carousel container padding.

Advanced tab

The Advanced tab has the standard Divi options: CSS ID and classes, custom CSS, attributes, conditions, visibility, transitions, position and scroll effects.