Vanilla JavaScript image carousel 🎠

[u/Low_Mammoth_9371]

[u/Low_Mammoth_9371]

Code at text below, full YT tutorial including how to add user controls: https://youtu.be/BGxRao9tkzI

// Get all images (display value initially 'none'):
const images = document.querySelectorAll('#carousel img');

let speed = 3000;
let index = 0;

// Set image to be displayed immediately:
updateContent();

// Start rotating through images at 'speed':
(function startInterval() {
    setInterval(() => {
        index++;
        if (index === images.length) {
          index = 0;
        }
        updateContent();
    },speed);
})();

// Make image at index value visible:
function updateContent() {
   images.forEach(item => item.classList.remove('active'));
   images[index].classList.add('active');
   // 'active' class sets display to 'block'
}

[u/liluzisquirt_]

Interesting I’ll have to test it out