When you work with DIVI theme, sometimes you may encounter situations that you want to add DIVI modules in to a Carousel. There is a pre built Slider module that comes with DIVI. But It’s designed to create a Carousel with an Image and some text.
But in this blog post. I’m gonna teach you all, how you can add any DIVI module into a Carousel with Owl Carousel 2 . There are some confugurations that we need to do before actually creating the slider. Lets go through them step by step.
If you want to follow this tutorials, first you need to set up a DIVI child theme. We are not going to edit the DIVI theme itself as there is a high chance of vaishing out code when Elegent Themes release a new theme version and when we update it. Therefore using a child theme is the best option we have.
After setting up your child thme, actvate it and make it the theme that we are using.
Including Owl Carousel’s CSS and JS files – Create Custom Sliders inside Divi
For us to use Owl Carousel inside our DIVI project, we must include all CSS and Javasceipt files that comes with Owl Carousel. That is where all the functionality and styles are defined. Trying to use Owl carousel without them is like trying to drive without a vehical. Therefore lets see how we can add them into our project.
There are two ways that we can add them into the project.
- Downloading files from therir website and uploading to our site
- Using a content dilivery network (CDN)
For the simplysity of the project, I will be using the CDN method. If you are somewhat familiar with WordPress you may know there are seperate functions that WordPress team has introduced to include styelesheets and scripts. We are gonna use the wp_enque_script() and wp_enque_style() in order to add the files. At the same time we will use a seperate Javascript file to write our Javascript code. To do that we have to install a plugin called WP File Manager

Next you have to navigate inside to the created child theme. It’s inside wp-content/themes/Divi-child. I have named my child theme as “Divi-child” in your case it may be different.
We have to create a folder named “js” and inside it a javascript file named “custom-scripts.js” , this is the file that we are going to use to write our custom Javascript code.

If you are using a Windows computer you ca easily do it with CMD. Launch CMD and type the following command.
echo > custom-script.js
touch custom-scripts.js

Now we have our own Javascript file to write Javascrpit code. You can also add Javascript code inside Divi theme options, but I wanted to to create a separate file for organization purposes.
Next, you have to paste the below code at the end of your functions.php file inside the Divi child theme.
//Add Owl Carousel Files
function wdp_include_owl_carousel_files() {
wp_enqueue_style( 'owl-base', 'https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css',array(),'2.3.4','all');
wp_enqueue_style( 'owl-theme', 'https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css',array(),'2.3.4','all');
wp_enqueue_script('owl-js','https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js', array( 'jquery' ),'2.3.4',true );
wp_enqueue_script('custom-js', get_stylesheet_directory_uri().'/js/custom-scripts.js', array( 'jquery' ,'owl-js'),'1.0',true );
}
add_action( 'wp_enqueue_scripts', 'wdp_include_owl_carousel_files' );
Creating The Structure – Custom Sliders inside Divi
We can now start building the module sctructure to build our carousel module. I have created a new page, added a new section and a row. Then I have added 5 Image modules inside the row. You can see how it looks like from the below image.

Adding Relevant Class names – Custom Sliders inside Divi
Next you have to open row setting by clicking the gear icon on the green bar (row) and have to navigate into the column settings.

Then navigate into Advanced tab and CSS ID And Classes section. After that you have to give 2 classes which are “owl-carousel” and “owl-theme” and you can give another class of your preference, here I have used “wdp_owl_slider”.

Adding Javascript Code
Now we are almost done, as the final step ,what we have to do is to navigate into custom-scripts.js file that we created and enter the Javascript code to add functionality to our Carousel structure that we have created. I recommend you use the Default Theme Editor that comes with WordPress to edit the files.

Lets add our javascript code now. Copy and paste the below code into your custom-scripts.js file.
(function($) {
//Owl carouse js
$(".wdp_owl_slider").owlCarousel({
items : 2,
loop:true,
margin:10,
responsive:{
0:{
items:1
},
980:{
items:2
}
}
});
})( jQuery );
Yaayy!!! We have done it. If you check your page now, you must be able to slide all images or whatever the Divi module that you have put inside the row. There are many options that you can control in this slider. All the options are mentioned in Owl Carousel Docs. Take a look at it when you have time and try to play around with the options. I hope that you have learned to create a slider with any Divi module in this article.
I will see you in the next article. Till then happy coding and enjoy your life.
This is very useful course for new learner learning or developing web site with divi.
Thanks Jiang.