使用Barba JS加载自定义外部javascript

编程问答 2022-08-13

问题描述

我有一个当前正在工作的网站，并且正在尝试使用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的了解要好得多，因此我们将不胜感激。

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

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

barbajsjavascriptjqueryslick.js