我有一个有章节的一页网站。当用户浏览幻灯片时,使用 + 作为中间部分。
如果用户向下滚动,主体锁应该处于活动状态,直到最后一张幻灯片,如果用户滚动回页面顶部,则反之亦然。
// body lock while going down
window.addEventListener("scroll", function() {
var elementTarget = document.getElementById("the-dashboard");
if (window.scrollY > elementTarget.offsetTop + eleme
我在一个页面上有两个刷子,它们是链接和同步的。这两个都是循环的,大约显示60张幻灯片(长度是动态的)。两个Swiper都有分页功能,在单击“下一步”和“上一步”按钮(.swipePrev()和.swipeNext())时都可以很好地工作。
第一个Swiper只显示了一个大图像,第二个是带有缩略图的旋转木马(显示活动的那个,以及前两张幻灯片和两张下一张幻灯片)。当我在其中任何一个页面上翻页时,活动索引被更新,活动幻灯片在小幻灯片中居中,大图像也被更新。
我现在想要添加功能,当我单击旋转木马中的幻灯片时,还可以更新这两个滑块。我在carousel中添加了以下代码:
onSlideClick: fu
使用Swiper JS作为滑块,并希望仅为中间幻灯片启用中心幻灯片,而不是第一张和最后一张幻灯片。有没有一种简单且可配置的方法来指定以下居中幻灯片的索引?
var swiper = new Swiper('.my-swiper-section', {
slidesPerView: auto,
spaceBetween: 1
});
我想出了以下方法,但它现在100%正确地工作:
swiper.on('slideChangeTransitionStart', function () {
if (swiper.isBeginnin
我使用Swiper.js在各部分之间滑动,也使用AOS.js在滚动体上进行动画。我想动画的文字在滑动部分,但只有文本在第一节动画,它只做了一次,当页面加载,而不是每次滑动滑动。我尝试了许多解决方案,但都没有奏效。以下是我在JS中尝试过的:
在幻灯片更改时使用AOS.refresh()on ()重新调用AOS.init(),在幻灯片更改时删除和添加AOS类,在幻灯片更改时手动删除和添加AOS类,将AOS属性手动添加到HTML 中
以下是两个可编辑以正确工作的片段。
var swiper = new Swiper('.swiper', {
on: {
init: f