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

<style>
    #rec732482862 .t-slds__arrow {
        opacity: 0;
    }
    
    #rec732482862 .t-slds__bullet {
        width: 100% !important;
        position: relative;
        padding: 0px !important;
    }
    
    #rec732482862 .t-slds__bullet_body {
        width: 100% !important;
        position: absolute;
        background-color: rgba(255, 255, 255, 20%) !important; /* Прозрачный цвет фона не активной плашки */
    }
    
    #rec732482862 .t-slds__bullet_wrapper {
        display: flex !important;
        justify-content: space-between;
        width: 99% !important;
        gap: 10px;
        transform: scale(0.95);
    }
    
    #rec732482862 .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 = "#rec732482862"
        
        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>