Ndtyjky

I have 6 images shown below. The first div contains 4 images and the remaining 2 images are placed to the 2nd div. Using my pagination in a form of a bullet. What I`m trying to achieve is to automatically change the active div every 3secs. The only thing that comes to my mind is to use setInterval.

Here's the JavaScript Code

function showFrameIndex(index) {

var frames = document.getElementsByClassName('gall-frame');

var badges = document.getElementsByClassName('badge-item');

var i;



for (i = 0; i < frames.length; i++) {

frames[i].style.display = 'none';

}

frames[index].style.display = 'flex';



for (i = 0; i < badges.length; i++) {

badges[i].className = 'badge-item badge-item-inactive';

}

badges[index].className = 'badge-item';

}

var displayIndexFrame = 0;

showFrameIndex(displayIndexFrame);

Here's the current output

1st div

2nd div

Here's a simple example of how you can hide something and show the other, i'm sure there's better ways, now inside the callback of setInterval you'll
have to add the code to change the bullets you have, Also if you only want this to happen once, change setInterval to setTimeout

let d1 = document.querySelector('.d1');

let d2 = document.querySelector('.d2');

let timeinSec = 3;

setInterval(() => {

  d1.classList.toggle('hide');

  d2.classList.toggle('hide');

}, timeinSec * 1000);

.d1,

.d2 {

  width: 100px;

  height: 100px;

  background: dodgerblue;

}



.d2 {

  background: orange;

}



.hide {

  display: none;

}

<div class="d1 hide"></div>

<div class="d2"></div>