синхронизировать машинку с цикличной каруселью jquery

Question

Я пытаюсь сделать заголовок каждого изображения, если моя карусель будет набираться автоматически с помощью библиотеки js пишущей машинки, но у меня есть некоторые трудности с их синхронизацией. т. е. каждый раз, когда изображение карусели активно, должен быть напечатан точный заголовок изображения и время, в которое заголовок напечатан, пауза и стирание должны совпадать с таймаутом каждого изображения карусели. Пожалуйста, помогите мне.

это пример кода, который имеет

<h2 id="activity"></h2>
<div id="imagesCarousel">
    <img class="d-block w-100" src="/assets/images/undraw_researching.svg"
                    alt="Training program on the online Platform" style="width: 100%; height: 400px;">
    <img class="d-block w-100" src="/assets/images/undraw_teaching.svg" alt="Coaching" style="width: 100%; height: 400px;">
    <img class="d-block w-100" src="/assets/images/undraw_business_plan.svg"
                    alt="Business Consultancy" style="width: 100%; height: 400px;">
    <img class="d-block w-100" src="/assets/images/undraw_breaking_barriers.svg"
                    alt="Motivational Speaking" style="width: 100%; height: 400px;">
</div>

$(document).ready(function(){
    var type = document.getElementById('activity');
    var typewriter2 = new Typewriter(type, {
        loop: true,
        delay: 20
    });
    $('#imagesCarousel').cycle({ 
        fx: 'scrollLeft', 
        timeout: 5000,
        before: function() {
            typewriter2.typeString(this.alt)
            .pauseFor(3000)
            .deleteAll()
            .start()
        },
        after: function(){
            typewriter2.deleteAll(10);
        }
    });
});