Create Image Carousel In Divi

Create responsive image carousels with custom content directly inside the Divi Visual Builder. Easily attach images, titles, descriptions, and call-to-action buttons to each carousel item.

Key design capabilities include:

Choose between smooth Slide or 3D Coverflow transition effects.
Enable interactive dot pagination and navigation arrows.
Display sleek text overlays directly over carousel images.
Complete visual control over fonts, colors, spacing, borders, and shadows.

Ideal for showcasing client logos, portfolio projects, team members, and case studies.

The Image Card Carousel Divi module is available for both Regular and Fullwidth Divi sections.

Pre-Requisites

Insert “Image Card Carousel” Divi Module

Steps to insert the Image Card Carousel module into a Regular or Fullwidth section:
- Edit your page in the Divi Visual Builder.
- Inside any Divi row, click the Plus (+) icon to Add New Module.
- Search for Image Card Carousel, then click to insert the module into your layout.

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Add Carousel Card Items

Populate your carousel with individual card items containing images, headlines, descriptive copy, and CTA buttons.
You can add an unlimited number of carousel card items:
- Click the Plus (+) icon to Add New Item.
- Under the Content tab:
  - Title: Enter your item headline.
  - Description: Enter supporting copy or subtext.
  - Image: Upload or select an image from the WordPress Media Library.
  - Button:
    - Show Button: Toggle to display or hide the action button.
    - Button Text: Custom CTA button label.
    - URL: Destination link URL.
    - Link Target: Choose whether to open links in the same tab or a new window.
  - Background: Set custom background colors or gradients for the item.
- Under the Design tab:
  - Title: Customize font family, weight, size, color, and alignment for headlines.
  - Description: Set typography and color styles for body text.
  - Button:
    - Enable Use Custom Styles For Button to customize button typography, background colors, borders, icons, and padding.
    - Button Alignment: Align buttons left, center, or right.
    - Content Wrapper: Style the text container wrapping your content (padding, margins, and background).
  - Spacing: Adjust custom margins and padding for card items.
  - Border: Set rounded corner radius and border lines.
  - Box Shadow: Apply subtle drop shadows to card containers.

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Carousel Settings

Configure carousel transitions, speed, and responsive playback options:
- Effect: Choose your transition animation mode:
  - Slide: Classic horizontal slide animation.
  - Coverflow: 3D perspective depth effect with additional controls:
    - Enable Coverflow Slide Shadow: Toggle drop shadows for inactive slides and customize Shadow Color.
    - Coverflow Rotate: Adjust rotation angles for adjacent side slides.
    - Coverflow Depth: Fine-tune z-axis 3D depth spacing.
- Slides Per View: Set how many slides display simultaneously (configure responsive values for desktop, tablet, and mobile).
- Space Between Slides: Set pixel spacing between slides across screen sizes.
- Initial Slide: Specify starting slide index (first slide starts at index 0).
- Centered Slides: Toggle YES to align active slides in the center.
- Enable Loop: Toggle YES for infinite continuous looping.
- Autoplay: Toggle YES to advance slides automatically:
  - Autoplay Delay: Duration between slide transitions (in milliseconds).
  - Pause On Hover: Toggle YES to pause autoplay when visitors hover over the carousel.
- Transition Duration: Slide animation speed (in milliseconds).
- Show Arrows: Toggle YES to enable Next/Previous arrow controls.
  - Show Arrows On Hover: Toggle YES to display arrows exclusively when hovering over the carousel.
- Show Dots Pagination: Toggle YES to display dot navigation indicators.

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Style Carousel Elements

Complete visual design controls for every component of your carousel:
- Content Tab:
  - Background: Set background colors or gradients for the overall carousel container.
- Design Tab:
  - Carousel Wrapper: Outer container margin and padding controls.
  - Slide:
    - Equal Height: Toggle YES to force uniform height across all carousel cards regardless of text length.
    - Background: Set solid colors, gradients, or background images.
    - Border & Radius: Rounded corners and border styling.
    - Box Shadow: Depth shadows for individual slides.
  - Content Wrapper:
    - Content Vertical Alignment: Align text and buttons vertically to the top, center, or bottom of cards.
    - Overlay Content Over Image: Toggle YES to position text overlays directly over background images.
      - Content Visibility: Choose Show Always or Show Only On Hover.
    - Content Padding & Background: Custom padding and overlay background colors.
  - Arrow Navigation: (Requires Show Arrows enabled):
    - Arrow Size & Color: Icon dimensions and color.
    - Arrow Background: Circle or square background fill for arrow buttons.
    - Arrow Position: Choose from pre-set layout positions:
      - Middle & Enclosed
      - Middle & Outside
      - Middle & Overlapping
      - Top & Right / Center / Left
      - Bottom & Right / Center / Left
    - Border & Radius: Rounded edges or full circular pill shapes.
  - Dot Navigation: (Requires Show Dots enabled):
    - Dot Position: Align pagination to Center, Left, or Right.
    - Active & Inactive Dot Colors: Distinct colors and opacity for active vs inactive dots.
    - Dot Dimensions: Customize Dot Width, Dot Height, and Dot Border Radius.
    - Margins & Padding: Container and individual dot spacing.
Pro Tip: Combine Dot Width, Dot Height, and Dot Border Radius to craft custom circular, square, rectangular, or line-style pagination indicators.

Pro Tip: Apply 50% border radius to arrow navigation containers to create perfectly circular navigation buttons.

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Demo Page Layouts

Import pre-designed Divi builder layouts for the Image Card Carousel module to jumpstart your design.
How to import a demo layout:
- Create or edit a page in the Divi Visual Builder.
- Click the Ellipsis (…) icon at the bottom center to expand the page settings toolbar.
- Click the Portability (⇅) icon.
- Select the Import tab in the modal window.
- Choose your downloaded layout .json file from your computer.
- Check Replace existing content if you wish to overwrite current page content.
- Click Import Divi Builder Layout to complete import.
- Save your page once loaded.
Explore available layout downloads below:

Download - Mountains 01

Image card carousel layout featuring single-slide transitions with text overlays.

Download - Logo Carousel

Sleek client logo carousel layout with hover arrow navigation.

Download - Coverflow Carousel

Dynamic 3D Coverflow perspective layout for image cards.

Download - Burger Carousel

Hero single-slide product showcase with headline and CTA button overlays.

Download - Recipe Carousel

Food & recipe card carousel with headline, description, and action buttons.

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial