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
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 sectionjQuery('.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 sectionconst 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 datafunction seedIndexData(){let i = 0tab.forEach(item=> {item.setAttribute('data-index',i)i++})}seedIndexData()// initialize tab items with index data// function to return current enabled tab itemfunction 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 sectionfunction 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=0content.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 sectionfunction 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=0content.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 buttonsforward.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 arrowslet index=0function returnClickedIndex(ind) {index = indreturn 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
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