与导航互动时，多个图像滑块相互干扰

Question

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

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

好像有一个变量在新调用该函数期间没有刷新。

我从此Codepen中获得了灵感：
https://codepen.io/team/keyframers/pen/pZyWPd

这是用于动画的Flip技术和David Khourshid的Flipping库 。

// Array of clickable
const elPrevButton = document.querySelectorAll("div[id^='prev']");
const elNextButton = document.querySelectorAll("div[id^='next']");

const flipping = new Flipping();


// Object that takes memory of current photo
let state = {
    photo: [0,0]
};

function send(event,index) {
    // read cuticle positions
    flipping.read();

    //search element to be processed
    var wrapper = document.getElementById("articolo"+index);
    var elImages = Array.from(wrapper.querySelectorAll('.articolo-slider-image'));
    var elActives = wrapper.querySelectorAll('[data-active]');


    Array.from(elActives)
        .forEach(el => el.removeAttribute('data-active'));

    switch (event) {
        case 'PREV':
            state.photo[index]--;
            console.log("state photo "+state.photo[index]);
            // Math.max(state.photo - 1, 0);
            break;
        case 'NEXT':
            state.photo[index]++;
            console.log("state photo "+state.photo[index]);
            // Math.min(state.photo + 1, elImages.length - 1);
            break;
        default:
            state.photo[index] = +event;
            break;
    }

    var len = elImages.length;
    // Loop Around
    //state.photo = ( ( state.photo % len) + len ) % len;
    state.photo[index] = Math.max(0, Math.min( state.photo[index], len - 1) );

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

    // execute the FLIP animation
    flipping.flip();
}

// Initialization of clickable elements
for(var i=0; i<elPrevButton.length;i++){
    var temp=elPrevButton[i];
    temp.addEventListener('click',listenerPrev.bind( null, i));
}

function listenerPrev(index){
    send('PREV',index);
}


for(var i=0; i<elNextButton.length;i++){
    var temp=elNextButton[i];
    temp.addEventListener('click',listenerNext.bind( null, i));
}


function listenerNext(index){
    send('NEXT',index);
}

这是第一个html滑块：

<section class="articoli-container">
    <div class="articolo" id="articolo0">
        <div class="articolo-header">
            <h2>
                Bambole:
            </h2>
        </div>

        <div class="articolo-slider">
            <div class="articolo-slider-image" data-key="0" data-active="true">
                <img src="immagini/bambolaccia.jpg" alt="">
            </div>
            <div class="articolo-slider-image" data-key="1">
                <img src="immagini/bambolaccia2.jpg" alt="">
            </div>
            <div class="articolo-slider-image" data-key="2">
                <img src="immagini/bambolaccia3.jpg" alt="">
            </div>
        </div>

        <div class="articolo-nav">
            <div id="prev_1">
                <img src="immagini/arrowsx.png" alt="">
            </div>
            <div id="next_1">
                <img src="immagini/arrowsx.png" alt="">
            </div>
        </div>
    </div>
</section>

您可以在以下位置找到整个站点的html和CSS：
http://lerbavoglio.altervista.org/giocattoli.html

谢谢。

对不起，英语不好，但这不是我的语言。

Answer 1

超级简单的解决方案：更改了->

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);

对于看不到它的人，我将“ document.querySelectorAll”更改为“ wrapper.querySelectorAll”，其中“ wrapper”是指向正确滑块div的变量