ГАЛЕРЕЯ В ВИДЕ СТОРИС

МОДЫ

Галерея
в виде сторис

Все как обычно, создаем зеро блок, добавляем туда галерею. Нужно будет правильно ее настроить, по скринам:

Добавляем как есть

Включаем обязательно DOTS, cтавим внутри изображения.
Не забудьте в Active Color добавить линейный градиент.
Цвет белый в обоих точках, прозрачность 20%

С помощью Size вы сможете регулировать размер, а Active Color - добавляет прозрачности на плашки. Далее указывайте в поле для ввода ID вашего блока и вставляете скрипт.

ID Блока

& .t-slds__bullet {
        width: 100% !important;
        position: relative;
        padding: 0px !important;
    }

& .t-slds__bullet_body {
        width: 100% !important;
        position: absolute;
        background-color: rgba(255, 255, 255, 20%) !important;
    }

& .t-slds__bullet_wrapper {
        display: flex !important;
        justify-content: space-between;
        width: 99% !important;
        gap: 10px;
        transform: scale(0.95);
    }

& .t-slds__bullet_active .t-slds__bullet_body::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 0%;
        height: 100%;
        border-radius: 20px;
        background-color: rgba(255, 255, 255, 100%) !important;
        animation: fillAnimation 5s forwards;
    }
  }

@keyframes fillAnimation {
    100% {
        width: 100%;
    }
}
</style> 
 
<script>
$(document).ready(function() {
    var id = "{{blockID}}";
    var interval = setInterval(function() {
        var bulletBody = $(id + ' .t-slds__bullet_active .t-slds__bullet_body');
        if (bulletBody.length > 0) {
            clearInterval(interval);
            $(document).on('animationend', function(event) {
                if (event.originalEvent.animationName === 'fillAnimation') {
                    $(id + ' .t-slds__arrow_body-right').click();
                }
            });
        }
    }, 100);
});
</script>