1

我有一个我目前正在开发的网站，我正在尝试使用 Barba JS。我有一些可以工作的东西（有点），但我在使用外部 Javascript 源时遇到了问题。特别是一个 Slick Slider 和一些与之相关的自定义 JS。

有问题的JS如下。它是一个标准的光滑滑块，但有一些自定义 JS 为每张幻灯片提供一个带有计时器的进度条。一旦达到设定的时间，幻灯片就会改变。单击活动幻灯片的进度条将重置进度条和计时器。

function slickCarousel() {

$('.slider__projects').slick({
...options...
})


var percentTime;
var tick;
var time = 1;
var progressBarIndex = 0;

$('.progressBarContainer .progressBar').each(function(index) {
    var progress = "<div class='inProgress inProgress" + index + "'></div>";
    $(this).html(progress);
});

function startProgressbar() {
    resetProgressbar();
    percentTime = 0;
    tick = setInterval(interval, 200);
}

function interval() {
    if (($('.slider__projects .slick-track div[data-slick-index="' + progressBarIndex + '"]').attr("aria-hidden")) === "true") {
        progressBarIndex = $('.slider__projects .slick-track div[aria-hidden="false"]').data("slickIndex");
        startProgressbar();
    } else {
        percentTime += 1 / (time + 5);
        $('.inProgress' + progressBarIndex).css({
            width: percentTime + "%"
        });
        $('.inProgress' + progressBarIndex).addClass('active-slide');
        if (percentTime >= 100) {
            $('.slider__projects').slick('slickNext');
            progressBarIndex++;
            if (progressBarIndex > 2) {
                progressBarIndex = 0;
            }
            startProgressbar();
        }
    }
}

function resetProgressbar() {
    $('.inProgress').css({
        width: 0 + '%'
    });
    $('.inProgress').removeClass('active-slide');
    clearInterval(tick);
}
startProgressbar();
// End ticking machine

$('.progressBarContainer div').click(function () {
    clearInterval(tick);
    var goToThisIndex = $(this).find("span").data("slickIndex");
    $('.slider__projects').slick('slickGoTo', goToThisIndex, false);
    console.log('ClickAction');
    startProgressbar();
});
} 

function destroyCarousel() {
if ($('.slider__projects').hasClass('slick-initialized')) {
$('.slider__projects').slick('destroy');
}      
}  

slickCarousel();

我的 Barba JS 配置实际上只是默认设置。只是我从教程中使用的东西让我开始。首先是执行页面转换的 GSAP 代码

function pageTransition() {
var tl = gsap.timeline();

tl.to(".transition li", {
   --options--
});

tl.to(".transition li", {
    --options--
});
}
    
function contentAnimation() {
var tl = gsap.timeline();
tl.from(".headline", {
    --options--
});
 }

然后是实际的 Barba 代码

barba.init({
sync: true,

transitions: [
    {
        async leave(data) {
            const done = this.async();
            pageTransition();
            await delay(1500);
            done();
        },
        async enter(data) {
            contentAnimation();
        },
        async once(data) {
            contentAnimation();
        },
        enter() {
            destroyCarousel()
            slickCarousel();
           
        }
    },
],
});        
    
 function delay(n) {
  n = n || 2000;
  return new Promise((done) => {
    setTimeout(() => {
        done();
    }, n);
  });
  }

我唯一添加的是 enter() 钩子（我认为它在正确的位置），我在其中销毁了页面上的 2 个滑块，然后重新初始化它们。一旦我导航回主页，这似乎可以正常工作，因为滑块可以正常工作。问题是这些滑块中的一个对于每张幻灯片都有一个幻灯片进度条功能，其代码包含在上面。

一旦我导航回主页，幻灯片的进度条似乎在闪烁，尤其是当您单击已经处于活动状态的进度条时。这样做的正常行为是重置进度条。但是这样做似乎会在原始进度条之上覆盖另一个进度条，这就是我认为导致闪烁的原因。我为糟糕的解释道歉，因为用文字解释起来很棘手。

我希望那里的人可以a）理解问题，b）就如何解决它提供一些建议。我尝试了一些东西，但主要是反复试验。我敢肯定这里有比我自己更好的 JS 知识的用户，所以任何帮助都将不胜感激。

如果您需要更多信息，我很乐意提供。

4

0 回答 0