ForEach/querySelectorВсе необходимые ⇐ Jquery

[Anonymous]

У меня этот код работает нормально, но мне нужно иметь возможность добавить более одной «галереи».
В настоящее время он работает только с первой.

Код: Выделить всё

        const interactImg2 = document.querySelector('.cc');
const interactImg = document.querySelector('.interact-img');
const interactImgAll = document.querySelector('.interact-img');
const imgContainer = document.querySelector('.img-container')
const interactImgMain = document.querySelector('.interact-main')
var images = [];

[...interactImg2.querySelectorAll("img[src]")].forEach((img) =>
images.push(img.getAttribute('src'))
);
let currentIndex = 0;

function changeImage() {
const imgElement = document.querySelector('.img-change');

setTimeout(() => {
currentIndex = (currentIndex + 1) % images.length;
imgElement.src = images[currentIndex];
imgElement.alt = `Image ${currentIndex + 1}`;

}, 500);
}

setInterval(changeImage, 200);

window.addEventListener('mousemove', e => {
const { clientX, clientY } = e
const x = Math.round(clientX / window.innerWidth * 100)
const y = Math.round(clientY / window.innerHeight * 100)
gsap.to(imgContainer, {
x: `${clientX}`,
y: `${clientY}`,
ease: 'sine.out',
duration: .5
})
})
const sliderTL = gsap.timeline({ default: { ease: 'power4.out', duration: .1 } })
sliderTL.to(imgContainer, {
opacity: 1,
clipPath: ' polygon(0 0, 100% 0, 100% 100%, 0 100%)',
duration: .2
})

sliderTL.pause()

interactImg.addEventListener('mousemove', () => {
sliderTL.play()

})
interactImg.addEventListener('mouseleave', () => {
sliderTL.reverse()

})

Код: Выделить всё

[img]./blank.png[/img]

[img]./img7.png[/img]

[img]./img1.png[/img]
[img]./img2.png[/img]
[img]./img3.png[/img]
[img]./img4.png[/img]
[img]./img5.png[/img]

Здесь новичок..
Как я могу изменить этот код, чтобы его можно было использовать для большего количества предметов? Я где-то читал, что мне нужно использовать «.forEach((function(e)» с «document.querySelectorAll», но, будучи новичком, я не мог понять, как правильно это решить. Уже потратил много времени и все еще в начале.
Любая помощь приветствуется.
С помощью PHP я могу определить уникальный номер и назначить его каждой части кода, чтобы можно было клонировать любое количество Мне нужно, но это не чистый способ, и мне нужно будет решить проблему с «каждой» функцией
Коротко говоря, это то, чего я пытаюсь достичь:

Код: Выделить всё

... etc ...
... etc ...

...

Подробнее здесь: https://stackoverflow.com/questions/784 ... all-needed