jQuery: change content several times

I have simple jQuery code which after 1 second makes animation and change content.

How can I edit my jQuery script which will change content after another 1 second. So when my script ends I need to make another round and start again my animations and change content to another. Another content must be something different like the first and second one.

After the third round ended I need to start the script from the beginning.

I tried it to copy it several times but it doesn't work. Although I try to make a copy inside of the first one then it will start looping.

MY CODE:

$(document).ready(function() {

    setTimeout(function() {
        $('.top-slider').toggleClass('active');
        $('#slider-headline').on('transitionend webkitTransitionEnd', function() {
            $('.top-slider').removeClass('active');
            $("#slider-headline").text("Videography");
            $(".bg-number").text("2");
    });
    }, 1000);
  });
.bg-number {
    display: inline-block;
    overflow: hidden;
    max-height: 1000px;
    transition: max-height 1.25s ease-in-out;
    align-self: flex-start;
}
  
 #slider-headline {
        overflow: hidden;
        max-height: 600px;
        position: relative;
        z-index: 2;
        transition: max-height 1.25s ease-in-out;
}
    
p {
    overflow: hidden;
    max-height: 1000px;
    transition: max-height 1.25s ease-in-out;
}

.line {
  display: inline-block;
    background: $red;
    height: 35px;
    margin-top: -5px;
    transition: all 0.75s ease-in-out;
    width: 100%;
}

.top-slider.active .line {
    width: 0;
}

.top-slider.active .bg-number {
    max-height: 0;
}
  

.top-slider.active #slider-headline {
    max-height: 0;
}

.top-slider.active p {
    max-height: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="top-slider">
            <span class="bg-number">1</span>
            <div class="content">
                <div class="slider-headline">
                    <div class="headline-wrapper">
                        <h2 id="slider-headline">Photography</h2>
                    </div>
                    <div class="line"></div>
                </div>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro dolor dolores delectus expedita minus, molestias rem! Aspernatur quos eum optio eligendi autem dolores.</p>
            </div>
        </section>