Массив картинок сделать повторяющейся анимацией

Прошу помощи.

Есть массив url-картинок и массив даты соответствующий картинке.

например pic[1]='https://services.swpc.noaa.gov/images/animations/ovation/north/aurora_N_2020-11-02_0925.jpg' time[1]='2020-11-02T09:55:00Z'

Задача вывести это на экран с циклической анимацией

один div - это циклическая анимация картинок второй div - это циклический вывод времени

и все это дело еще по клику на паузу ставить - было бы просто идеально!

Нашел решение - но не понял как зациклить. и есть подозрение что оно не очень. И как вывести второй массив (время) рядом?

 var Pic = new Array();
var timer = new Array();
Pic[1] = 'https://services.swpc.noaa.gov/images/animations/ovation/north/aurora_N_2020-11-02_0925.jpg'; timer[1]='2020-11-02T09:25:00Z';
Pic[2] = 'https://services.swpc.noaa.gov/images/animations/ovation/north/aurora_N_2020-11-02_0930.jpg';timer[2]='2020-11-02T09:30:00Z';
Pic[3] = 'https://services.swpc.noaa.gov/images/animations/ovation/north/aurora_N_2020-11-02_0935.jp'; timer[1]='2020-11-02T09:35:00Z';
Pic[4] = 'https://services.swpc.noaa.gov/images/animations/ovation/north/aurora_N_2020-11-02_0945.jpg'; timer[1]='2020-11-02T09:45:00Z';
Pic[5] = 'https://services.swpc.noaa.gov/images/animations/ovation/north/aurora_N_2020-11-02_0955.jpg'; timer[1]='2020-11-02T09:55:00Z';



var t;
var j = 0;
var p = Pic.length;
var preLoad = new Array();
for (i = 0; i < p; i++) {
preLoad[i] = new Image();
preLoad[i].src = Pic[i];
}
//all images are loaded on client
index = 0;
function update(){
if (preLoad[index]!= null){
document.images['foto'].src = preLoad[index].src;
index++;
setTimeout(update, 100);
}

}
update();

<img name="foto">

https://jsfiddle.net/hibinyru/euy1phrt/3/

Заранее спасибо!