Блог

У нас есть 2 слайдера, каждый со своими собственными навигационными стрелками. Они должны скользить независимо, но иногда возникает своего рода помеха, и они скользят вместе.

Это происходит, например, когда первый слайдер доходит до конца, а затем мы нажимаем далее на втором.

Похоже, что есть переменная, которая не обновляется во время нового вызова функции.

Я черпал вдохновение из этого codepen:
https://codepen.io/team/keyframers/pen/pZyWPd

Для анимации используется техника переворачивания и библиотека перелистывания Дэвида Хуршида.

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

Спасибо.

Извините за плохой английский, но это не мой язык.

супер простое решение: изменено это —>

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

Для тех, кто этого не видит, я изменил «документ.Выбор запроса ко всей оболочке «to».querySelectorAll»
где «оболочка» — это переменная, которая указывает на правильный div слайдера