Блог

В проекте есть несколько ползунков swiper на разных разделах. Слайды запускаются только тогда, когда они появляются в окне просмотра. Для этого я использовал javascript observer.

Итак, проблема возникает на ползунках разделов 5 и 6. swiper.Метод setProgress(прогресс, скорость) для сброса перехода с 1-го слайда. Он работает на слайдере раздела 5, но не применяется к слайдеру раздела 6.

Если я уберу swiper5.setProgress(progress,speed) . Слайдер раздела 6 запустится, когда появится в окне просмотра, в противном случае этого не произойдет.

Я назвал каждый слайдер по-разному, например, .mySwiper5 и .mySwiper6 в соответствии с разделами 5 и 6.

Я думаю, что сценарий конфликтует друг с другом. Что можно сделать, чтобы решить эту проблему?

Ссылка на проект : https://project-instock.netlify.app/

Вот код наблюдателя javascript:

 new fullScroll({
    mainElement: 'main',
    displayDots: false,
    dotsPosition: 'right',
    animateTime: 0.7,
    animateFunction: 'ease',
});

$('#nav-button').click(function () {
    $('.icon').toggleClass('close');
});

/*navbar*/
const navToggle = document.querySelector('#nav-button');
const menu = document.querySelector('.menu');

navToggle.addEventListener('click', function () {
    if (menu.classList.contains('hide')) {
        menu.classList.remove('hide');
    } else {
        menu.classList.add('hide');
    }
});

/*Section 1 slide*/
var swiper1 = new Swiper('.mySwiper1', {
    speed: 1000,
    effect: 'fade',
    fadeEffect: {
        crossFade: true,
    },
    centeredSlides: true,
    pagination: {
        el: '.swiper-pagination',
        clickable: true,
    },
    autoplay: {
        delay: 7000,
        disableOnInteraction: false,
    },
});

/*Section 5 slide*/
let swiper5 = new Swiper('.mySwiper5', {
    speed: 1000,
    effect: 'fade',
    fadeEffect: {
        crossFade: true,
    },
    centeredSlides: true,
    pagination: {
        el: '.swiper-pagination',
        clickable: true,
    },
    autoplay: {
        delay: 7000,
        disableOnInteraction: false,
    },
});

/*Section 6 slide*/
let swiper6 = new Swiper('.mySwiper6', {
    speed: 1000,
    effect: 'fade',
    fadeEffect: {
        crossFade: true,
    },
    centeredSlides: true,
    pagination: {
        el: '.swiper-pagination',
        clickable: true,
    },
    autoplay: {
        delay: 7000,
        disableOnInteraction: false,
    },
});

const appearOptions1 = {
    threshold: 0,
    rootMargin: '0px 0px 0px 0px',
};

const appearOnScroll1 = new IntersectionObserver(function (
    entries,
    appearOnScroll1
) {
    entries.forEach((entry) => {
        if (!entry.isIntersecting) {
            return;
        } else {
            entry.target.classList.add('appear');
            appearOnScroll1.unobserve(entry.target);

            if (window.innerHeight > window.innerWidth) {
                if (
                    /Android|webOS|iPhone|iPad|BlackBerry|IEMobile|Opera Mini/i.test(
                        navigator.userAgent
                    )
                ) {
                    $(document).ready(function () {
                        $('.progress .p1').attr('aria-valuenow', '20');

                        $('.progress .p2').attr('aria-valuenow', '62');

                        $('.progress .p1').css('width', function () {
                            return $(this).attr('aria-valuenow')   '%';
                        });

                        $('.progress .p2').css('width', function () {
                            return $(this).attr('aria-valuenow')   '%';
                        });
                    });
                }
            } else {
                $(document).ready(function () {
                    $('.progress .progress-bar').css('width', function () {
                        return $(this).attr('aria-valuenow')   '%';
                    });
                });
            }

            swiper5.setProgress(0, 1000);
            swiper6.setProgress(0, 1000);
        }
    });
},
appearOptions1);

bar.forEach((pbar) => {
    appearOnScroll1.observe(pbar);
});

function changeText(text) {
    var display = document.getElementById('text-display');
    display.innerHTML = '';
    display.innerHTML = text;
}

function defaultText() {
    var display = document.getElementById('text-display');
    display.innerHTML = '';
    display.innerHTML =
        '<h2>'  
        'Compare prices'  
        '<br/>'  
        'with ease'  
        '</h2>'  
        '<p>'  
        'Get the best deals for your daily needs.'  
        '</p>';
}