Creating Divi Modules as Slides – Ask Nimitz

In this tutorial, I will be focusing on some of the questions that our Divi community have. For instance, Maximiliano Alejandro Carlucho asked if it is possible to have a slider effect with a menu to navigate the slides without touching the bit of CSS. To answer the question, it is not quite possible yet on the current modules that Divi offers, since this type of functionality needs special coding skills and not all people are using this kind of setup. But here on my “Ask Nimitz” segment, I will be providing guides or tutorials to achieve this type of function and other related question from our Divi Community, so if you have questions on how to achieve things on Divi, just tagged me on your facebook post in on of the Divi Communities (Facebook Groups).

First Things First

Since the post topic is very similar to the one of the Divi Modules, we will try to achieve it using Slider Module first. Check the default Slider Module below.

We are limited to what the Slider Module offers and that’s why I understand the OP’s likeliness to have its own or very similar to his liking.

The Challenge

Since the default slider module doesn’t have any advance script that is available for other users to use, it would be almost impossible for other users with almost next-to-none knowledge with HTML, CSS and possible jQuery to achieve the same effect.

My Thoughts on the Matter

Since are arrows and bullet points on the default slider, maybe we can use those HTML elements as the menu for our slider.

Solution #1

Using the default Module Slider then using its bullet points and small jQuery process. Check the demo below; for the sake of no touching of CSS, this is how it will look like.

Solution #1’s Tutorial

The demo above can be improved with the help of CSS settings, especially the buttons, but first, let’s create the layout.   The Button Layout Depending on the number of slides you wish to add then that is the number of buttons you should add as well. I have created two separate sections. The first section will hold our buttons and to achieved no CSS coding, I have to use 4 columns leaving the first and last column empty while the second and third column, holds our buttons.   The Button Settings Make sure that the buttons have the following CSS ID “demo-company-slider” and “demo-slider-two” respectively. To make it work. See image below for the Company Button. The Slider layout The slider layout is built using the Full With Section with the Fullwidth Slider and Fullwidth code. I have used the default and available slider in the Divi Layouts for this demo and you can use it too or create your own. If you don’t know how to setup your slider yet, make sure to check the divi documentation for the Fullwidth Slider guide here. The Fullwidth Code Remember, we added unique ID’s to our buttons, then this is the time that we should use it. Insert the following code at the fullwidth code module.

Adding more buttons If you wish to add more buttons, make sure to adjust your jQuery script.

$("#demo-company-slider").on("click", function(e) {
e.preventDefault();
$(".et-pb-controllers a:nth-child(1)").trigger("click");
});

The #demo-company-slider is the unique ID we used in the button, make sure to replace this one tot he unique ID you add in your button and adjust the number in this code .et-pb-controllers a:nth-child(1) from 1 to corresponding number of your bullets. 1 means the first bullet, 2 means, the second bullet and you get the picture (I hope so).