Question

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

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

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

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

这是对动画和David Khourshid Flipping library使用翻转技术。

// 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

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

background: blue url('data:image/svg+xml;utf8,<svg height="26" viewBox="0 0 49 26" width="49" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><mask id="a" fill="#fff"><path d="m40.4999996 49.7721796 21.0858528-21.1836866c.781085-.7847091 2.047415-.7846497 2.8284271.0001325.7810122.7847823.7809531 2.0571065-.0001319 2.8418155l-21.4389273 21.5383985c-.6561449.6601903-1.5466298 1.0311605-2.4752203 1.0311605s-1.8190754-.3709702-2.4741476-1.030082l-21.44-21.539477c-.781085-.784709-.7811441-2.0570332-.0001319-2.8418155.7810121-.7847822 2.0473421-.7848416 2.8284271-.0001325z" fill="#fff" fill-rule="evenodd"/></mask><g fill="none" fill-rule="evenodd" transform="translate(-16 -28)"><path d="m0 0h80v80h-80z" fill="none"/><g fill="#4a515c" fill-rule="nonzero" mask="url(#a)"><path d="m0 0h80v80h-80z"/></g></g></svg>') no-repeat;

对此->

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

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

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

1 个答案: