We have 2 sliders, each with its own nav arrows. They should slide independently but sometimes there's a sort of interference and they slide together.

This happens, for example, when the first slider arrives at the end and then we click next on the second one.

Seems like there's a variable that is not getting refreshed during the new call to the function.

I took inspiration from this codepen:
https://codepen.io/team/keyframers/pen/pZyWPd

This is using Flip technique for animations and 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);
}

And here the first html slider:

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

You can find the entire site html and css at:
http://lerbavoglio.altervista.org/giocattoli.html

Thank you.

Sorry for bad english but it's not my language.

1 Answers

0
Community On

super easy solution: changed this -->

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

to this -->

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

For who can't see it, I changed "document.querySelectorAll" to "wrapper.querySelectorAll" where "wrapper" is a variable that points to the correct slider div