Блог

Хотя приведенный ниже код, добавляющий индикатор выполнения в «JS Swiper», хорошо работал в прошлом, я заметил, что в новом проекте, над которым я работаю, я получал мерцания в переходах, которые я проследил до индикатора выполнения.

Я хотел бы заменить «интервал» на «requestAnimationFrame», поскольку, исходя из понимания, индикатор выполнения будет работать с более высокой частотой кадров в секунду, что, я надеюсь, решит проблему с мерцанием, но, попытавшись реализовать это, индикатор выполнения не только останавливается при взаимодействии, но и увеличивается с каждым проходом.

Пожалуйста, не могли бы вы взглянуть на код и указать мне правильное направление — спасибо-вам…

 var duration = 3;
var interval = 5;
var progressBar = document.querySelector('.progress');

var mySwiper = new Swiper('.swiper-container', {
    loop: true,
    grabCursor: true,
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
    pagination: {
        el: '.swiper-pagination',
        clickable: true,
    }
});

// Main Progress Bar Function

var percentTime, step, tick;

function startProgressbar() {
    resetProgressbar();
    percentTime = 0;
    isPaused = false;
    tick = window.setInterval(increase, interval);
}

function increase() {
    if (!isPaused) {
        step = duration * 1000 / interval;
        percentTime  = 100 / step;
        progressBar.style.width = percentTime   "%";
        if (percentTime >= 100) {
            mySwiper.slideNext();
            startProgressbar();
        }
    }
}

function resetProgressbar() {
    progressBar.style.width = 0   "%";
    clearTimeout(tick);
}

startProgressbar();

// Pause Control

var isPaused = false;

// Pause Carousel when it's Hovered Over

$('.swiper-container, .carousel-progress').mouseenter(function() {
    isPaused = true; // (Change 'true' to 'false' if not required)
});

$('.swiper-container, .carousel-progress').mouseleave(function() {
    isPaused = false;
});

// Reset Progress Bar on Slide Change

mySwiper.on('slideChange', function() {
    startProgressbar();
    isPaused = true; // (Change 'true' to 'false' if not required)
});