如何解决使用Barba JS加载自定义外部javascript
我有一个当前正在工作的网站,并且正在尝试使用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 举报,一经查实,本站将立刻删除。