问题标签 [barbajs]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
766 浏览

javascript - Barba js滚动位置

我是 barba.js 的新手,所以只是想了解一下。

执行页面转换时,我的浏览器页面滚动保持在原来的位置。这是故意的吗?

是否有可能在转换后像往常一样在顶部加载下一页?

这是我的代码

0 投票
0 回答
107 浏览

javascript - 使用 Barba.js 将缩略图扩展到页面转换

我想知道是否有任何地方可以创建缩略图到全屏过渡 Barba.js 的教程?我的目标是用于我的投资组合网页设计

0 投票
2 回答
1646 浏览

javascript - 无法使用 Barba.js 和机车滚动向下滚动

我一起使用 barba.js 和机车滚动,当我单击菜单链接(page2)转到另一个页面时,我有覆盖转换,但是一旦它向下滚动,我就无法向下滚动,我添加了下面的代码

我仍然得到相同的结果,请帮助解决这个问题

完整脚本如下

谢谢

0 投票
1 回答
126 浏览

html - Html:BarbaJS 滑块过渡

我第一次使用这个库,我的问题是第一次加载页面时滑块工作。当我切换到另一个页面并再次返回滚动页面时,滑块不起作用。请你帮帮我,我是新来的barba js,我不知道该怎么做,如果你能帮助她,我会很高兴的。

如图所示。第一个图像在页面加载时起作用。不适用于 2 张图片

在此处输入图像描述

0 投票
0 回答
462 浏览

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

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

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

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

然后是实际的 Barba 代码

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

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

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

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

0 投票
0 回答
225 浏览

javascript - Barba.js CDN 不会从 CDN 或节点模块加载?

我现在在 HTML 文件中使用 barba.js,由于某种原因,它拒绝从 CDN 和节点模块加载。我尝试使用 barba.js 安装页面上提供的两个链接。我什至尝试复制和粘贴网站上列出的示例,但这也不起作用。请帮忙!!!!下面链接的 HTML

0 投票
1 回答
234 浏览

javascript - 如何正确调用从第三方脚本导入的 js 模块

我有一个非常奇怪的问题,我无法解决。

我正在使用Barba.js,它可以制作很棒的页面转换和Swiper.js,它是一个可爱的轮播。问题是它使您的页面成为 SPA,因此您必须重新init编写脚本。告诉你真相是一件很痛苦的事。

在我的barba.js文件中,我在顶部调用了一个 swiper carousel

然后在我的swiper.js文件中

这一切正常,但我有另一个页面上没有轮播,因此.swiper-container将返回 null。这也很好,但是因为我在 barba.js 的顶部导入

它在页面刷新时调用,从而导致令人讨厌的错误

Cannot read property 'push' of undefined

无法读取未定义错误的属性推送

当路线改变时,没有可怕的控制台错误。

我想在一个理想的世界里,我会把这个导入语句放在里面,if (document.querySelector('.swiper-container') != null)但是导入必须是顶级的。

请问有什么建议吗?我正要通过窗外的电脑。大概是好事。

0 投票
0 回答
336 浏览

javascript - Barba Js 在第一次链接上重新加载页面

我在 Wordpress 站点中使用 Barba js v.2。

我第一次单击链接时,地址栏中的页面会发生变化,但它会立即重定向到我的页面上。我第二次点击同一个链接时,页面发生了变化,过渡效果很好。

为什么我需要在同一个链接上单击两次才能更改页面并进行转换?

我还在 Wordpress 上使用插件 W3 Total Cache。有什么冲突吗?

谢谢!

0 投票
1 回答
66 浏览

html - 为什么我的 Fancybox 窗口会立即打开和关闭?

我正在使用 barba js,我通常用 php 列出图像。但是当我单击花式框时,花式框窗口会再次打开并关闭。

花式盒子

列表

0 投票
1 回答
98 浏览

css - 如何创建此页面转换?

我一直在尝试创建此页面转换https://alitwotimes.com/,特别是“工作”和“生物”之间的转换。我已经尝试过 swup.js 和 barba.js 但我没有任何运气,不过我可能只是错误地使用它们。

我不是在寻找代码,但我只是希望有人能够指出我正确的方向。

谢谢!