Setup And Style Divi Image Carousel

The Image Carousel Using Divi plugin provides a dedicated Divi module for displaying an interactive slideshow of images.

Use the Image Carousel Divi module in the Divi Visual Builder to add unlimited images, configure slideshow rotation and motion controls, and custom-style all carousel elements.

Pre-Requisites

• A WordPress Website
• Divi Theme
• Image Carousel For Divi Plugin

Add Image Carousel Module On Divi Page

1. Open or edit a page in the Divi Visual Builder.
2. Click the plus icon (+) to Add New Module and search for Image Carousel.
3. Click to insert the module onto your page layout.
4. The module Settings modal will open automatically.

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Add Images To Divi Image Carousel Module

1. In the Divi module settings popup, go to the Content tab.
2. Click Add New Image.
3. This opens the “Image Carousel Item” settings window.
4. Click Add Image and select or upload your image from the WordPress Media Library.
5. Click the green check mark button to save the image item.
6. Repeat these steps to add as many images as you need to your carousel.

Add Single Image To Divi Image Carousel

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Setup Divi Image Carousel Settings

1. Customize carousel options according to your design needs:

   • Carousel General Settings

     • 

       Image Carousel General Settings

     • Slide to start on - Set the starting image slide index when the webpage loads.

     • Z-Index - Set z-index layer stacking values to control image overlap and depth.

   • Carousel Responsive Settings

     • 

       Divi Image Carousel Responsive Settings

     • Number of visible images - Set how many images display simultaneously across Desktop, Tablet, and Mobile screens.

     • Images to scroll - Set how many images scroll per transition across Desktop, Tablet, and Mobile screens.

   • Carousel Motion Settings

     • 

       Divi Image Carousel Motion Settings

     • Infinite loop sliding - Toggle ON to enable continuous, infinite carousel looping.

     • Enable Autoplay - Toggle ON to automatically start sliding images upon page load.

     • Autoplay Speed in milliseconds - Set the delay duration between slide rotations.

     • Pause Autoplay On Focus - Toggle ON to pause automatic sliding when visitors hover over an image.

     • CSS3 Animation - Choose slide transition effect styles.

     • Animation Speed - Set the transition animation duration.

   • Carousel Navigation Settings

     • 

       Divi Image Carousel Navigation Settings

     • Show Prev/Next Arrows - Toggle ON to display left and right navigation arrows.

     • Show Dots Navigation - Toggle ON to display pagination dot indicators along the bottom of the carousel.

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Divi Image Carousel Styling Settings

1. Customize visual design for slides, navigation arrows, pagination dots, and fine-grained CSS:

   • Carousel Image Styling

     • Go to the Design tab.

     • 

       Styling Image In Divi Image Carousel

     • Vertical Alignment - Align images vertically to Top, Center, or Bottom.

     • Border & Border Radius - Set rounded corners and border styling.

     • Box Shadow - Apply drop shadow depth effects.

     • Padding - Adjust inner image spacing.

   • Carousel Navigation Styling

     • 

       Styling Navigation Elements For Divi Image Carousel

     • Set custom background colors for Dot and Arrow navigation controls.

   • Custom CSS
     • Image Container
     • Image Tag & Hover state
     • Arrow navigation & hover state
     • Dot navigation & hover state
     • Active dot indicator styling

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial