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

Любая помощь будет оценена. Спасибо!

0 ответов

Другие вопросы по тегам