Text and Image dependent on each other and change every 6 second – Jquery

Is this possible to change text after 6 second and in the mean time 2 image will also be change with 3 second delay and text and images should be dependent on each other.
for example:

text = [string1, string2]
images = [image1, image2, image3, image4]

so if "string1" change in 6 second so in same 6 second images "image1, image2" will also change. and so same for "string2" images "image3, image4" will change accordingly and main thing is no matter page loading took time due to heavy but text and images iteration should be matched

<script>
var text = [string1, string2];
var backgroundImg=[image1, image2, image3, image4];
var counter = 0;
var currentPos = 0;
var elem = document.getElementById("animated-text");
var elembg = document.getElementById("animated-background");
var inst = setInterval(change, 6000);
//var bginst = setInterval(changeImage, 2000);
console.log("changetextbefore");

function change() {
console.log("changetextbefore call function" + counter + currentPos);

    if (counter == 0 ) {
    console.log("counter == 0 " + counter + text[counter]);
        elem.innerHTML = text[counter];
        office1();  
    }   
    else  {
        elem.innerHTML = text[counter];
        console.log("counter == 1" + counter + text[counter]);
        office2();

    }

  counter++;
  
  if (counter >= text.length) {
  console.log("counter >= text.length");
    counter = 0;
    // clearInterval(inst); // uncomment this if you want to stop refreshing after one cycle
  }
}


(function office1(i) {
  setTimeout(function() {
    console.log('hello'); //  your code here  
    
    if (--i) myLoop(i);   //  decrement i and call myLoop again if i > 0
  }, 3000)
})(2);      

function office1() {  
    console.log("changetextbefore call office 1");
    
    while (currentPos < 2) {
    console.log("currentPos < 2" + currentPos);
        setInterval(function(){elembg.style.backgroundImage = "url('"+backgroundImg[currentPos]+"')" }, 3000);
        console.log(backgroundImg[currentPos]);
        currentPos++;
    }   
    
}  

function office2() {
    console.log("changetextbefore call office 2");
    
    while (currentPos < 4) {
    console.log("currentPos < 4" + currentPos);
        setInterval(function(){elembg.style.backgroundImage = "url('"+backgroundImg[currentPos]+"')" }, 3000);
        console.log(backgroundImg[currentPos]);
        currentPos++;
    }
    
    if ( currentPos > 3) {
        console.log("changetextbefore call office 2 if condition");
        currentPos = 0;
    }
}  
</script>

Here above i write my code but unfortunately that give not same result expected. Again i need to change text in 6 second and in same 6 second, two i images will be change image1, image2
and in other 6 second second string will come up and their image3 and image 4 after 3 second delay

6second = change text to string1 +  (image1  => 3second , image2  => 3second  )

please check here my code in jsfiddle and should see their console

Run On Jsfiddle