Loading custom external javascript with Barba JS

Question

I have a website I'm currently working on and I'm experimenting using Barba JS. I have something in place that works (sort of) but I'm having trouble with external Javascript sources. In particular a Slick Slider and some custom JS associated with it.

The JS in question is the following. It is a standard slick slider but with some custom JS giving each slide a progress bar with a timer. Once the set time is reached, the slide changes. Clicking the progress bar of an active slide will reset the progress bar and the timer.

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(); 

My Barba JS config is just the default setup really. Just something I used from a tutorial to get me started. First is the GSAP code to carry out the page transitions

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

And then the actual Barba code

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

The only thing I have added to this is the enter() hook (which I think is in the correct place) in which I have destroyed my 2 sliders on page and then reinitialized them. This seems to work as the sliders function correctly once I have navigated back to the homepage. The issue is that one of these sliders has a slide progress bar feature for each slide, the code for which is included above.

Once I have navigated back to the homepage, the progress bars for the slides seem to be flickering, particularly if you click on on already active progress bar. The normal behavior of this would be to reset the progress bar. But doing this seems to overlay another progress bar on top of the original and this is what I believe to be causing the flickering. I apologize for the poor explanation as it's a tricky one to explain in text.

I'm hoping someone out there can a) Understand the issue and b) offer some advice on how I can fix it. I've tried a few things, but mostly trial and error. I'm sure there are users here with far better JS knowledge than myself so any help would be much appreciated.

If you require any more information, I'm happy to provide it.