Функциональность слайдера во вкладках Divi

tldr: мы собираемся добавить стрелки вправо и влево в модуль вкладок divi, чтобы придать ему функциональность типа ползунка.

Шаг 1

Создайте модуль разделяемых вкладок, как вы обычно это делаете, из Backend или Front end Visual Builder.

Заполните содержимое заполнителя, как показано выше.

Шаг 2

Добавьте класс, который будет специфичен для нашего настраиваемого слайдера вкладок, именно так мы собираемся применять пользовательские стили и функциональные возможности слайдера.

Добавьте имя класса «custom_tabs_slider» в модуль вкладок, как показано ниже.

Шаг 3

Добавьте пользовательский CSS для ползунка вкладок, скопируйте приведенный ниже код и вставьте его в
Divi-> Параметры темы -> Пользовательский CSS.

Примечание: используйте изображения, которые у вас есть, я использовал те, которые у меня есть локально, поэтому они будут отображаться как неработающие, поэтому обязательно поменяйте URL-адреса изображений.

/* 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;
}

После вставки пользовательского css модуль вкладок должен выглядеть примерно так

Шаг 4

Теперь наступает фактический шаг функциональности слайдера, для того, чтобы этот шаг работал, нам нужно добавить некоторый код javascript в нашу тему, и я использовал плагин Custom Css and Js, установите плагин и добавьте через него приведенный ниже код js, вы можете использовать любой другой плагин, который вам нравится.

Примечание. Убедитесь, что вы добавляете код в нижний колонтитул страницы, а не в заголовок.

// 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

Заключение

После выполнения всех шагов ваш слайдер должен выглядеть и функционировать, как показано ниже.

Я мог бы использовать плагин слайдера, но хотел бы попробовать сделать это без него, надеюсь, это поможет, если вы пытаетесь сделать что-то подобное.