Non-standard slideshow with text

Question

I want to do a slideshow with text on my website. We have one text in H1 tag and another in P tag. The point is that when you open a webpage, the slideshow starts immediately. The text in H1 tag slowly appears (say the fade or slide method), then the text in P tag appears. After some time, the texts disappear at the same time. Continuing to restart again, text H1, then P, and so on appears. Note that all texts are stored in an array of objects. Maybe you have any ideas? Thank you.

var headerSlidesArray = [
{
    'h1' : 'Lorem Ipsum is simply dummy text of the printing and typesetting industry',
    'p' : "Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book"
},
{
    'h1' : 'Second H1',
    'p' : 'Second P'
},
{
    'h1' : 'Third H1',
    'p' : 'Third P'
}];

HTML code:

<div id="slider">
            <div class="slide">
                <h1></h1>
                <p></p>
            </div>
            <div id="sliderBtns">
                <div class="sliderBtn active"></div>
                <div class="sliderBtn"></div>
                <div class="sliderBtn"></div>
            </div>
        </div>

Answer 1

 var headerSlideIndex = 1; var nextHeaderSlideIndex = headerSlideIndex + 1; var headerSlideShowLoop; var headerSlidesCount; $('.slide:nth-child(' + headerSlideIndex + ')').show(); $('.slide:nth-child(' + headerSlideIndex + ') > h1').fadeIn(1500); $('.slide:nth-child(' + headerSlideIndex + ') > p').delay(1500).fadeIn(1500); startHeaderSlider(); function startHeaderSlider() { headerSlidesCount = $('#slider >.slide').length; headerSlideShowLoop = setInterval(function() { if (nextHeaderSlideIndex > headerSlidesCount) { headerSlideIndex = 1; nextHeaderSlideIndex = 1; } showHeaderSlide(nextHeaderSlideIndex); }, 8000); } function prevHeaderSlide() { var prevHeaderSlide = headerSlideIndex - 1; showHeaderSlide(prevHeaderSlide); } function nextHeaderSlide() { var nextHeaderSlide = headerSlideIndex + 1; showHeaderSlide(nextHeaderSlide); } function stopHeaderSlideShowLoop() { window.clearInterval(headerSlideShowLoop); } function showHeaderSlide(id) { stopHeaderSlideShowLoop(); $('.sliderBtn').removeClass('active'); if (id > headerSlidesCount) { id = 1; } else if (id < 1) { id = headerSlidesCount; } $('.slide').hide(); $('.slide > h1').hide(); $('.slide > p').hide(); $('.slide:nth-child(' + id + ')').show(); $('.slide:nth-child(' + id + ') > h1').fadeIn(1500); $('.slide:nth-child(' + id + ') > p').delay(1500).fadeIn(1500); $('.sliderBtn:nth-child(' + id + ')').addClass('active'); headerSlideIndex = id; nextHeaderSlideIndex = id + 1; startHeaderSlider() } $('.sliderBtn').click(function(e) { e.preventDefault(); showHeaderSlide($(e.target).index() + 1); });

 #slider { width: 100%; height: 200px; position: relative; }.slide { display: none; }.slide > h1 { display: none; }.slide > p { display: none; } #sliderBtns { position: absolute; bottom: 0; right: 0; display: flex; }.sliderBtn { margin: 0 5px; width: 1rem; height: 1rem; background-color: rgba(0, 0, 0, 0); border: 0.1rem solid rgb(0, 0, 0); border-radius: 50%; cursor: pointer; }.sliderBtn.active { background-color: rgb(245, 212, 118); border-color: rgb(245, 212, 118); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="slider"> <div class="slide"> <h1>HEADER 1</h1> <p>Paragraph 1</p> </div> <div class="slide"> <h1>HEADER 2</h1> <p>Paragraph 2</p> </div> <div class="slide"> <h1>HEADER 3</h1> <p>Paragraph 3</p> </div> <div id="sliderBtns"> <div class="sliderBtn active"></div> <div class="sliderBtn"></div> <div class="sliderBtn"></div> </div> </div>

Answer 2

I would run a function which is always getting called by a timer after a certain time. A variable keeps track of which state is currently shown to the user. Depending on that value, you can show the next text.

 setTimeout(myFunction, 1200); var counter = 0; var headline = document.getElementById('headline'); var subHeadline = document.getElementById('subHeadline'); function myFunction() { if ((counter%2) == 0) { headline.innerHTML = "Headline 2"; subHeadline.innerHTML = "Subheadline 2"; } else if ((counter%2) == 1) { headline.innerHTML = "Headline 1"; subHeadline.innerHTML = "Subheadline 1"; } counter++; setTimeout(myFunction, 1000); }

 <h1 id="headline">Headline 1</h1> <p id="subHeadline">Subheadline 1</p>

I am using two states in my demo. The first state, which is coded into the HTML. The others getting loaded with Javascript. I am using modulo to get the different states and counting up everytime the function has been called.