Javascript 多个图像滑块在与导航交互时相互干扰

我们有两个滑块，每个都有自己的导航箭头。它们应该独立滑动，但有时会有某种干扰，它们一起滑动

例如，当第一个滑块到达末尾，然后单击第二个滑块上的“下一步”时，就会发生这种情况

似乎有一个变量在新函数调用过程中没有刷新

我从这个代码笔中获得了灵感：

这是在动画和动画中使用翻转技术

//可单击的数组
const elPrevButton=document.queryselectoral（“div[id^='prev']”）；
const elNextButton=document.queryselectoral（“div[id^='next']”）；
常量翻转=新翻转（）；
//获取当前照片的内存的对象
让状态={
照片：[0,0]
};
函数发送（事件、索引）{
//读取角质层位置
翻转。读取（）；
//要处理的搜索元素
var wrapper=document.getElementById（“articolo”+索引）；
var elImages=Array.from（wrapper.querySelectorAll（'.articolo slider image'）；
var elActives=wrapper.querySelectorAll（“[data active]”）；
Array.from（elActives）
.forEach（el=>el.removeAttribute（'data-active'）；
开关（事件）{
案例“PREV”：
state.photo[索引]——；
console.log（“state photo”+state.photo[index]）；
//max（state.photo-1,0）；
打破
“下一个”案例：
state.photo[索引]+；
console.log（“state photo”+state.photo[index]）；
//Math.min（state.photo+1，elImages.length-1）；
打破
违约：
state.photo[索引]=+事件；
打破
}
var len=elImages.length；
//绕圈子
//state.photo=（（state.photo%len）+len）%len；
state.photo[index]=Math.max（0，Math.min（state.photo[index]，len-1））；
from（document.querySelectorAll（`[data key=“${state.photo[index]}”]`））
.forEach（el=>{
el.setAttribute（'data-active'，true）；
});
//执行翻转动画
翻转。翻转（）；
}
//可点击元素的初始化
对于（var i=0；i超简单解决方案：
更改此-->

对此-->

对于看不到它的用户，我将“document.querySelectorAll”更改为“wrapper.querySelectorAll”
其中“wrapper”是一个变量，它指向正确的滑块div
超级简单解决方案：
更改此-->

对此-->

对于看不到它的用户，我将“document.querySelectorAll”更改为“wrapper.querySelectorAll”
“包装器”在哪里是一个指向正确滑块div的变量
Hi！感谢@keyframes的介绍。它似乎只在您尝试转到PREV时发生。两个滑块似乎都在响应PREV调用，但我无法立即理解为什么这只发生在PREV上。希望这至少有帮助！感谢@shshaw的快速回复。现在我正在使用holi第二天。我一回来就会搜索一些新的解决方案！嗨！谢谢@keyframers的介绍。看起来只有当你尝试转到PREV时才会出现这种情况。两个滑块似乎都在响应PREV调用，但我无法立即理解为什么只有PREV才会出现这种情况。希望这至少有帮助！谢谢@shshaw的快速回复。现在我很高兴在假期。我一回来就会寻找一些新的解决办法！
Array.from(document.querySelectorAll(`[data-key="${state.photo[index]}"]`))
.forEach( el => {
 el.setAttribute('data-active', true);
 });

 Array.from(wrapper.querySelectorAll(`[data-key="${state.photo[index]}"]`))
.forEach( el => {
 el.setAttribute('data-active', true);