<style>
:root {
/* Ширина и длина кнопки, цвет заливки и сдвиг влево, чтобы кнопка стояла по центру*/
--widthButton: 70px;
--heightButton: 70px;
--backgroundButton: #60cfd8;
--leftPositionButton: -13px;
/* Буква внутри кнопки: ее цвет и размер шрифта */
--buttonSymbolColor: #FFFFFF;
--buttonSymbolFontSize: 20px;
/* Обводка вокруг кнопки: ширина, смешение относительно кнопки, обводка (ширина и цвет)*/
--buttonBorderWidth: 100px;
--buttonBorderHeight: 100px;
--buttonBorderPositionLeft: -16px;
--buttonBorderPositionTop: -16px;
--buttonBorder: 2px dashed #FFFFFF;
/*Смещение стрелок по бокам */
--arrowPosition: -55px;
}
/*Заменить ID на свои ID слайдеров с изображениями*/
.image__slider--1 #rec414471035,
.image__slider--2 #rec414481096,
.image__slider--3 #rec414482537,
.image__slider--4 #rec414482610 {display:flex; align-items:stretch; padding: 0!important;width: 100%!important;height: 100%;}
.image__slider--1, .image__slider--2, .image__slider--3, .image__slider--4 {width: 100%;display: flex;align-items: center;justify-content: center;}.image__slider--1 .tn-atom, .image__slider--2 .tn-atom, .image__slider--3 .tn-atom, .image__slider--4 .tn-atom {display: none;}
.image__slider--1 .t410__col, .image__slider--2 .t410__col, .image__slider--3 .t410__col, .image__slider--4 .t410__col {padding: 0!important;margin: 0!important;max-width: 100%!important;}.image__slider--1 .t-container,.image__slider--2 .t-container, .image__slider--3 .t-container, .image__slider--4 .t-container {max-width: 100%!important;}
.image__slider--1 .t410, .image__slider--2 .t410, .image__slider--3 .t410, .image__slider--4 .t410 {width: 100%;}
.image__slider--1 .t-container, .image__slider--1 .t410__col, .image__slider--1 .t410__wrapper, .image__slider--1 .juxtapose,
.image__slider--2 .t-container, .image__slider--2 .t410__col, .image__slider--2 .t410__wrapper, .image__slider--2 .juxtapose,
.image__slider--3 .t-container, .image__slider--3 .t410__col, .image__slider--3 .t410__wrapper, .image__slider--3 .juxtapose,
.image__slider--4 .t-container, .image__slider--4 .t410__col, .image__slider--4 .t410__wrapper, .image__slider--4 .juxtapose {height: 100%!important;}
.jx-controller {display: flex; justify-content: center; align-items: center; width:var(--widthButton)!important; height: var(--heightButton)!important; background-color: var(--backgroundButton)!important; border-radius: 50%; left: var(--leftPositionButton);}
.jx-controller::before {content: ''; position: absolute; left: var(--buttonBorderPositionLeft); top: var(--buttonBorderPositionTop); width: var(--buttonBorderWidth); height: var(--buttonBorderHeight); border-radius: 50%; border: var(--buttonBorder);}
.jx-controller::after {content:'К'; color: var(--buttonSymbolColor); font-size: var(--buttonSymbolFontSize); font-family: inherit;}
.jx-arrow.jx-left {left: var(--arrowPosition)!important;}
.jx-arrow.jx-right {right: var(--arrowPosition)!important;}
.tab__content {display: none;}
.tab__content.active {display: block;}
/* Активный цвет для меню */
/* Я указала цвет равный цвету кнопки слайдера */
/* Если нужен другой, то удали var() и вставь свой цвет */
.tab__link .active{color: var(--backgroundButton)!important;}
/* Активный цвет для меню */
</style>
<script>
document.addEventListener("DOMContentLoaded",function() {
// Заменить ID на свои ID слайдеров с изображениями
let imageSliderData = [
{".image__slider--1" : "#rec414471035"},
{".image__slider--2" : "#rec414481096"},
{".image__slider--3" : "#rec414482537"},
{".image__slider--4" : "#rec414482610"}
];
// Заменить ID на ID блоков для табиков
let tabData = "#rec414471292, #rec414481277, #rec414482553, #rec414482624";
function createSliderInZero() {
for (let i = 0; i < imageSliderData.length; i += 1) {
let key = Object.keys(imageSliderData[i]);
let value = Object.values(imageSliderData[i]);
let sliderShape = document.querySelector(key);
let imageSlider = document.querySelector(value);
sliderShape.appendChild(imageSlider);
}
}
class Tabs {
constructor () {
this.tabs = document.querySelectorAll(".tab__link a");
this.content = document.querySelectorAll(tabData);
this.start();
}
start() {
this.content.forEach((el, ind) => {
el.classList.add('tab__content');
if (ind === 0) {
el.classList.add('active');
}
})
this.tabs.forEach((el, ind) => {
// Добавление активного класса первой ссылке при загрузке страницы
if (ind === 0) {
el.classList.add('active');
}
// Добавление активного класса первой ссылке при загрузке страницы
el.addEventListener('click', () => this.tabClick(ind));
})
this.removeHash();
}
removeActive() {
for (let i = 0; i < this.tabs.length; i++) {
this.tabs[i].classList.remove('active');
this.content[i].classList.remove('active');
}
}
tabClick(index) {
this.removeActive();
this.tabs[index].classList.add('active');
this.content[index].classList.add('active');
}
removeHash() {
this.tabs.forEach((el) => {
el.addEventListener('click', (e) => {
e.preventDefault();
location.href.replace(/#.*/,'');
})
})
}
}
createSliderInZero();
let tabs = new Tabs();
})
</script>