Lorem ipsum dolor sit 1
Everything should be made as simple as possible, but not simpler.
Lorem ipsum dolor sit 2
Everything should be made as simple as possible, but not simpler.
Lorem ipsum dolor sit 3
Everything should be made as simple as possible, but not simpler.
Lorem ipsum dolor sit 4
Everything should be made as simple as possible, but not simpler.
Инструкция

1. Добавить на страницу 4 блока GL09, заменить изображения.
2. Создать 4 Zero Block, по одному для каждого таба.
3. В Zero Block создать шейп, который будет служить контейнером для слайдера, задать ему класс image__slider--1 (для следующих блоков заменить номер в классе на 2, 3 и 4 соответственно). Сделать его сразу нужного размера, ибо слайдер займет 100% высоты и ширины этого блока.
4. Ссылкам, которые переключают табы задать класс tab__link (которые в примере Link1, link2...).
5. Изменить в коде ID блоков слайдеров и зеро блоков. Я оставила комментарии прямо в коде. Нужно также заменить ID слайдеров в стилях.


Оформление кнопки

6. Внести нужные значения в начале css (я оставила комментарии). Если нужно изменить размер кнопки, то придется найти нужную позицию, чтобы кнопка по-прежнему оставалась на сайте.
7. Скопировать и вставить в T123 код, проверить работу. Сжать код на сайте. Можно сжимать целиком весь код или по частям сжать сначала CSS, а потом JS. Вставить результат в новый T123.

Я рекомендую сжать код, т.к. это позволяет сэкономить до 40% трафика.


Если не работает

Открыть консоль (Shift + Ctrl + I => Console), проверить наличие ошибок. При их наличии скинуть мне страницу. Чаще всего ошибки связаны с неправильно указанными ID или классами элементов.
 <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>
Made on
Tilda