Bootstrap Карусельный переход влияет на анимацию прокрутки из плагина Skewed (с использованием Onepage scroll)
Вот ссылка на шаблон, над которым я работаю - используя Boostrap 4: http://explorebolivia.org/es/fullpage/
Я использую плагин прокрутки одной страницы: https://github.com/peachananr/onepage-scroll
В Section0 есть карусель Bootstrap, и я использую перекошенный плагин для Section1: https://www.jqueryscript.net/demo/Skewed-One-Page-Scrolling-Effect-with-jQuery-CSS3/
Если вы прокрутите вниз, когда карусель не находится в середине перехода, она работает нормально. (3 страницы отображаются в разделе 1)
Однако, если вы прокрутите вниз в середине перехода между слайдами, первая страница (Страница1) в Разделе 1 сработает, и вы едва сможете ее увидеть, и в итоге вы увидите страницу 2 в Разделе 1.
Я видел, что у carousel есть события slide.bs.carousel и slid.bs.carousel, но я не понимаю, как использовать это, чтобы гарантировать, что если пользователь прокручивает страницу вниз, то только тогда, когда переход завершен, функция, выполняющая перекошенное поведение плагина должен бежать.
Есть идеи?
Вот как я инициализирую плагин onepage-scroll и запускаю функцию checkPosition() - это для плагина Skewed:
if ($(window).width() > 800) {
$(".main").onepage_scroll({
loop: false,
animationTime: 2000,
afterMove: function(index){
if ($('#section1').hasClass("active") && section1_complete == false){
checkPosition();
$(".main").addClass("lock");
}
if ($('.main').hasClass("lock")) {
$(".main > .section").removeClass("active");
$('#section0').addClass('active');
if (section1_complete == true) {
curPage = 1;
}
}
}
});
}
Вот функция checkPosition:
function checkPosition () {
if ($(window).width() > 800) {
console.log("run checkposition");
console.log(curPage);
function pagination() {
scrolling = true;
$(pgPrefix + curPage).removeClass("inactive").addClass("active");
$(pgPrefix + (curPage - 1)).addClass("inactive");
$(pgPrefix + (curPage + 1)).removeClass("active");
setTimeout(function() {
scrolling = false;
}, animTime);
};
function navigateUp() {
if ($('#section1').scrollTop() === 0) {
if (curPage === 1) {
return;
}
curPage--;
pagination();
} else {
return;
}
};
function navigateDown() {
section1_complete = false;
if (curPage === numOfPages) {
console.log("section1 is complete");
section1_complete = true;
section2_active = true;
$('.main').moveTo(3);
$('.main').removeClass('lock');
$('#section1').removeClass("active");
return;
}
curPage++;
pagination();
if (section1_complete === true) {
return;
}
return;
};
$('#section1').on("mousewheel DOMMouseScroll", function(e) {
if (scrolling) return;
if (e.originalEvent.wheelDelta > 0 || e.originalEvent.detail < 0) {
navigateUp();
} else {
navigateDown();
}
});
}
}
А также карусель инициализируется, когда DOM готов:
$('#carousel-intro').carousel({
interval:5000,
pause: 'null'
});
Любая помощь будет оценена. Спасибо!