Slider Functionality in Divi Tabs

tldr: we are going to add right and left arrow in divi tabs module to give it a slider type functionality

Step 1

Create a divi tabs module like you usually do from the Backend or Front end Visual Builder.

Fill the Placeholder content as shown above

Step 2

Add a class which will be specific to our custom tabs slider, this is how we are going to apply custom styles and slider functionality

Add Class name “custom_tabs_slider” to tabs module as shown below

Liked this tutorial? You can show Support by giving onetime payment on patreon

Step 3

Add Custom css for the tab slider, copy the code below and paste it in
Divi-> Theme Options -> Custom Css

Note: use images you have, I’ve used the ones I’ve locally so it will show as broken for you so make sure swapping the images urls.

/* Custom Tabs Slider*/
.custom_tabs_slider .et_pb_tab_content {
color : #fff !important
}
.avenir {
font-family:Avenir, Arial,Helvetica;
}
.custom_tabs_slider li.et_pb_tab_0:before {
background-image: url(http://sfsolutions.staging/wp-content/uploads/2022/10/Step-1_Expense_Review_LightBulb_Icon.png);
}
.custom_tabs_slider li.et_pb_tab_1:before {
background-image: url(http://sfsolutions.staging/wp-content/uploads/2022/10/Step-2_NegotiateProcess_SpeechBubble_Icon.png);
}
.custom_tabs_slider li.et_pb_tab_2:before {
background-image: url(http://sfsolutions.staging/wp-content/uploads/2022/10/Step-3_SavingsDelivered_Icon.png);
}
.custom_tabs_slider .et_pb_tabs_controls li.et_pb_tab_active:before {
opacity:1
}
.custom_tabs_slider .et_pb_tab_content {
max-width: 800px;
margin: 0 auto;
}
.custom_tabs_slider .et_pb_all_tabs{
margin-top:120px;
}
.custom_tabs_slider .et_pb_tabs_controls li:before {
content: "";
opacity:0.5;
position: absolute;
width: 50px;
height: 50px;
top: -55px;
left: 0;
z-index: 999999;
background-size: cover;
background-repeat: no-repeat;
background-position:center;
right: 0;
margin: 0 auto;
}
.custom_tabs_slider .et_pb_tabs_controls li {
border-right: none;
font-size: 30px;
font-family: Avenir,Arial,Helvetica;
border-bottom: 5px solid transparent;
padding-bottom: 10px;
}
.custom_tabs_slider .et_pb_tabs_controls li.et_pb_tab_active a {
color: #ffffff!important;
}
.custom_tabs_slider li.et_pb_tab_active {
border-bottom: 5px solid #79C5D7;
padding-bottom: 10px;
}
.custom_tabs_slider .et-pb-active-slide {
animation: fade 1s ease-in;
}
@keyframes fade {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.custom_tabs_slider .custom_tabs_slider .et_pb_tabs_controls li a {
color: #ffffff75;
}
.custom_tabs_slider .et_pb_tab_content * {
color:#fff !important;
}
.custom_tabs_slider .et_pb_tabs_controls {
max-width: 1050px;
margin: 0 auto;
background-color: transparent !important;
color: #fff !important;
display: flex;
align-items: center;
justify-content: center;
}
.w-full {
width:100%;
}
.howitworks_arrows {
z-index:9999 !important;
position: absolute;
width: 100%;
top: 50%;
max-width: 923px;
margin: 0 auto;
bottom:50%;
left: 0;
right: 0;
align-items: center;
color: #fff !important;
font-size: 20px;
display:flex !important;
justify-content:space-between;
}
.prev img , .next img {
width:20px;
cursor:pointer;
opacity:0.8;
}
.prev img:hover , .next img:hover {
opacity:1;
}
.prev img {
rotate: 180deg;
}

After Pasting custom css, tabs module should look something like this

Did some basic styling for active and inactive tabs

Step 4

Now comes the actual slider functionality step, for this step to work we need to add some javascript code to our theme and I have used Custom Css and Js plugin, install the plugin and add the below js code through it, you can use any other plugin you like.

Note: Make sure you add the code to footer of the page and not head

// adding arrow elements in tab content section
jQuery('.custom_tabs_slider .et_pb_all_tabs').append(`
<div class="howitworks_arrows et-pb-active-slide" style="z-index: 1; display: block; opacity: 1;">
<div class="prev"><img src="http://sfsolutions.staging/wp-content/uploads/2022/10/slider-arrow.svg"></div>
<div class="next"><img src="http://sfsolutions.staging/wp-content/uploads/2022/10/slider-arrow.svg"></div>
</div>`)
// adding arrow elements in tab content section
const tab = document.querySelectorAll(".custom_tabs_slider .et_pb_tabs_controls li");
const content = document.querySelectorAll(".custom_tabs_slider .et_pb_all_tabs > .et_pb_tab");
const forward = document.querySelector('.next');
const previous = document.querySelector('.prev');
const numOfTabs = tab.length-1;
// initialize tab items with index data
function seedIndexData(){
let i = 0
tab.forEach(item=> {
item.setAttribute('data-index',i)
i++
})
}
seedIndexData()
// initialize tab items with index data
// function to return current enabled tab item
function returnEnabledIndex() {
let index;
tab.forEach((item) => {
item.classList.contains("et_pb_tab_active") ? (index = item) : "";
});
return index;
}
// function to return current enabled tab item
// function for clicking next button in tab section
function nextItem(){
let moveTo = returnEnabledIndex().dataset.index;
let i = 0 ;
tab.forEach(item=> {
if(i==parseInt(moveTo)+1 && moveTo <numOfTabs){
item.classList.add('et_pb_tab_active')
}
else if(moveTo>=numOfTabs) {
return
}
else {
item.classList.remove('et_pb_tab_active')
}
i++
})
let j=0
content.forEach(item=> {
if(j==parseInt(moveTo)+1 && moveTo <numOfTabs) {
item.classList.add('et-pb-active-slide')
item.style.display="block"
item.style.opacity="1"
}
else if(moveTo>=numOfTabs) {
return
}
else {
item.classList.remove('et-pb-active-slide')
item.classList.remove('et_pb_active_content')
item.style.display="none"
item.style.opacity="0"
}
j++
})
}
// function for clicking previous button in tab section
function prevItem(){
let moveTo = returnEnabledIndex().dataset.index;
let i = 0;
tab.forEach(item=> {
if(i==parseInt(moveTo)-1){
item.classList.add('et_pb_tab_active')
}
else if(moveTo<=0) {
return
}
else {
item.classList.remove('et_pb_tab_active')
}
i += 1
})
let j=0
content.forEach(item=> {
if(j==parseInt(moveTo)-1) {
item.classList.add('et-pb-active-slide')
item.style.display="block"
item.style.opacity="1"
}
else if(moveTo<=0) {
return
}
else {
item.classList.remove('et-pb-active-slide')
item.style.display="none"
item.style.opacity="0"
}
j++
})
}
// add event listeners for previous and next buttons
forward.addEventListener('click',()=>nextItem())
previous.addEventListener('click',()=>prevItem())
// add event listeners for previous and next buttons
// selecting correct tab when user change tabs by clicking tab instead of arrows
let index=0
function returnClickedIndex(ind) {
index =  ind
return index
}
tab.forEach(item=>{
item.addEventListener('click',(e)=> {returnClickedIndex(item.dataset.index)
content.forEach(item=> {
item.classList.remove('et-pb-active-slide')
item.classList.remove('et_pb_active_content')
item.style.display="none"
item.style.opacity="0"
})
})
})
// selecting correct tab when user change tabs by clicking tab instead of arrows

Refer this if you like to see how to paste the code via the wordpress plugin

Conclusion

After completing all the steps, your slider should look and function like below

I could have use a slider plugin but would like to try to do it without it, hope it helps if you are trying to do something like this.

Liked this tutorial? You can show Support by giving onetime payment on patreon