Setup And Style Divi Image Carousel

The Image Carousel Using Divi plugin provides a divi module for cycling through images.

Use the Image Carousel divi module on the Divi Visual Builder page to add unlimited images, customize the carousel settings and custom style the carousel elements

Pre-requisites

1. A WordPress website
2. Divi Theme by Elegant Themes
3. Image Carousel For Divi plugin

Tools

1. Computer

Total Duration : 10 minutes

FREE DOWNLOAD

Start your FREE trial. No credit cards required.

Step 1 - Add Image Carousel Module On Divi Page

1. Edit a page in Divi Visual Builder
2. Search for Image Carousel in the divi module list
3. Edit a page in Divi Visual Builder
4. You will see the Image Carousel Settings

FREE DOWNLOAD

Start your FREE trial. No credit cards required.

Step 2 - Add Image To Divi Image Carosel Module

1. On divi module settings, goto Content Tab
2. Click on Add New Image
3. This will open "Image Carousel Item" settings.
4. Click on Add Image and select/upload a image.
5. Click on the tick icon as per the screenshot below
6. Repeat the steps for other images

   

FREE DOWNLOAD

Start your FREE trial. No credit cards required.

Step 3 - Setup Divi Image Carousel Settings

1. Setup carousel settings as per your needs. Set the start slide, number of slides to show on different device sizes, carousel motion settings and show/hide arrow/dot navigation

   • Carousel General Settings

     • 

     • Slide to start on - Set the default slide number starting which, the carousel will start its motion
     • Z-Index - Set the zindex values for slides, useful for IE9 and lower
   • Carousel Responsive Settings

     • 

     • Number of visible images - Number of images to show on desktop, tablet and phone
     • Images to scroll - Number of images to scroll on desktop, tablet and phone
   • Carousel Motion Settings

     • 

     • Infinite loop sliding - Toggle ON to set the carousel to scroll infinitely
     • Enable Autoplay - Toggle ON to start playing carousel when loaded
     • Autoplay Speed in milliseconds - Speed of the carousel slide
     • Pause Autoplay On Focus - Toggle ON to stop the carousel when a mouse pointer hovers over it
     • CSS3 Animation - Set the type of animation for a carousel slide
     • Animation Speed - Set the speed of the animation
   • Carousel Navigation Settings

     • 

     • Show Prev/Next Arrows - Toggle ON to show the previous and next arrows on the left and right of the carousel
     • Show Dots Navigation - Toggle ON to show the dots navigation at the bottom of the carousel

FREE DOWNLOAD

Start your FREE trial. No credit cards required.

Step 4 - Divi Image Carousel Styling Settings

1. • Style the image slide, arrow / dot navigation elements and add custom css for HTML selectors for the carousel.
     • Carousel Image Styling
       • Go the Design Tab

       • 

       • Vertical Alignment - Set alignment to Top, Center or Bottom
       • Border & Border Radius
       • Box Shadow
       • Padding
     • Carousel Navigation Styling

       • 

       • Set background color for Dot And Arrow Navigation
     • Custom CSS
       • Image Container
       • Image Tag + hover
       • Arrow navigation + before
       • Dot navigation + before
       • Dot active + before

FREE DOWNLOAD

Start your FREE trial. No credit cards required.