Слайдер из zero-блоков

<!--Слайдер из zero-блоков на Тильде
Студия веб-дизайна SHEINA – https://sheina-studio.ru/-->



<!-- ===== ИНСТРУКЦИЯ =====
1️⃣  ДОБАВЛЯЕМ СЛАЙД
Добавляем zero-блок и наполняем его.
Добавляем 2 стрелки (левую и правую).
Задаем стрелкам классы: левой –   .uc-arrow-left  , правой –   .uc-arrow-right  
Всему блоку зеро первого слайда задаем класс:   .uc-slide-1  

2️⃣  ДРУГИЕ СЛАЙДЫ
Далее дублируем зеро блок слайда, наполняем следующий слайд, повторяем до нужного кол-ва слайдов. Задаем каждому зеро блоку со слайдом соответствующий класс:
второй слайд –   .uc-slide-2  
третий–   .uc-slide-3  
и т.д.

❗️   ВАЖНО. Не трогаем стрелки. Они должны быть на всех слайдах на одном и том же месте.

3️⃣  НИЖЕ ВСТАВЛЯЕМ КОД -->


<style>
    [class*="uc-slide-"] {
        display: none; 
        opacity: 0; 
        transition: opacity .35s ease; 
    }
    
    .uc-slide-active {
        display: block !important;
        opacity: 1 !important;
    }

    .uc-arrow-left, .uc-arrow-right {
        cursor: pointer;
        user-select: none;
    }
</style>


<script>
    (function(){
        function getSlideNumber(el){
            const m = [...el.classList].join(' ').match(/uc-slide-(\d+)/);
            return m ? parseInt(m[1],10) : null;
        }

        const allSlides = [...document.querySelectorAll('[class*="uc-slide-"]')]
            .filter(el => getSlideNumber(el) !== null);

        if (!allSlides.length) return;

        const groups = [];
        let currentGroup = [];

        allSlides.forEach((el) => {
            const num = getSlideNumber(el);

            if (num === 1 || !currentGroup.length) {
                if (currentGroup.length) groups.push(currentGroup);
                currentGroup = [el];
            } else {
                const expected = getSlideNumber(currentGroup[currentGroup.length - 1]) + 1;
                if (num === expected) {
                    currentGroup.push(el);
                } else {
                    groups.push(currentGroup);
                    currentGroup = [el];
                }
            }
        });
        if (currentGroup.length) groups.push(currentGroup);

        groups.forEach(group => {
            group.forEach(s => s.classList.remove('uc-slide-active'));
            group[0].classList.add('uc-slide-active');

            group.forEach((slide, idx) => {
                const left  = slide.querySelector('.uc-arrow-left');
                const right = slide.querySelector('.uc-arrow-right');

                function show(i){
                    group.forEach(s => s.classList.remove('uc-slide-active'));
                    group[i].classList.add('uc-slide-active');
                }

                if (left)  left.addEventListener('click',  () => {
                    const cur = group.findIndex(s => s.classList.contains('uc-slide-active'));
                    const next = (cur - 1 + group.length) % group.length;
                    show(next);
                });

                if (right) right.addEventListener('click', () => {
                    const cur = group.findIndex(s => s.classList.contains('uc-slide-active'));
                    const next = (cur + 1) % group.length;
                    show(next);
                });
            });
        });
    })();
</script>