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.

  1. Downloading files from therir website and uploading to our site
  2. 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.

Custom Sliders Divi
The next step that you have to do it to navigate into that folder and create the javacript file. WP File Manager plugin doest allow us to create files with .js extension. Therefore what we are gonna do is create it in our computer and drag and drop it to the folder.

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
and if you are using a mac, launch your terminal navigate into any directory that you can reach easily and enter the below command.

touch custom-scripts.js
Now drag that created file into the js folder or else you can right click inside the folder and select upload file option.
Custom Sliders Divi

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. 

Custom Sliders Divi

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.

Custom Sliders Divi

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”.

Custom Sliders Divi

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. 

Custom Sliders Divi

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.