For the main structure, we have two main sections: the data and the media that correspond with each bullet point.

For the header and bullet section, each bullet is a simple div with a rounded border radius. Inside each custom bullet, another div absolutely fills the bullet container. The bullet fill is animated using CSS keyframes and triggered via JavaScript.

The first bullet is given an extra hardcoded class of "active." The active class applies special properties such as white text to the current bullet. During the animation, JavaScript loops through each of the bullets, removes the active class from all of them, and applies it to the next item in the array. Since we select our bullets and media using querySelector in JavaScript, we can use the returned array and its [index] to keep track of which items we're on and match each bullet to its corresponding image or media element.

An if/else statement within the JavaScript function determines whether to play the bullet fill animation via CSS keyframes when the animation runs normally. An event listener detects when a user clicks a bullet. If clicked, that bullet will fill completely, and a setTimeout pauses the animation loop for ten seconds before resuming continuous playback.

To achieve infinite looping, we use (currentIndex + 1) % allSectionItems.length. Since we're looping through an array starting with [index], the slide number is stored in currentIndex. We add one to advance to the next slide. The modulo operator then returns the remainder. When the index reaches the end, for example, 4 % 4 = 0, the 0 brings the sequence back to the first item, creating a seamless loop.