如何在bkt-album书籍滑块翻页时触发自定义changePageNumber函数？

问题背景 #

使用bkt-album的书籍滑块组件，希望在滑动/切换/翻页时调用自定义的changePageNumber函数，但当前添加的调用未生效，无法准确定位翻页触发的核心逻辑位置。

自定义函数代码：

let pageNumber = 1;

function changePageNumber(amount) {
  if (amount > 0) {
    if (pageNumber >= 12) {
      return;
    }
    pageNumber += 1;
  } else {
    if (pageNumber <= 1) {
      return;
    }
    pageNumber -= 1;
  }
}

已将函数添加到onload.js，尝试在以下位置调用但未触发：

if (Math.abs(self.delta_s) > 5) {
    // existing code...
  } else {
    // Calculate the distance swiped and determine whether to increase or decrease the page number
    var distanceSwiped = self.x_move - self.x_start;
    if (distanceSwiped > 0) {
      changePageNumber(-1);
    } else if (distanceSwiped < 0) {
      changePageNumber(1);
    }
  }
});

页面中翻页按钮通过onclick="plusSCli();plusSlides(-1);"和onclick="plusSCli();plusSlides(1);"触发翻页。

解决步骤 #

1. 绑定到核心翻页函数plusSlides #

plusSlides是滑块翻页的核心触发函数，滑动翻页和按钮点击最终都会调用它，直接在这个函数内添加自定义函数调用：

• 在onload.js中找到plusSlides函数，修改如下：

function plusSlides(n) {
  // 先调用自定义页码更新函数
  changePageNumber(n);
  // 保留原有翻页逻辑
  showSlides(slideIndex += n);
}

2. 修复滑动触发逻辑 #

之前的滑动判断可能因阈值设置未命中，直接依赖plusSlides的触发即可——只要滑动动作触发了plusSlides，就会自动调用changePageNumber。若需单独处理滑动事件，可找到touchend事件处理中确认翻页的代码块，直接调用changePageNumber。

3. 确保函数作用域可访问 #

如果changePageNumber定义在局部作用域，可能无法被plusSlides访问，将其挂载到全局作用域：

window.pageNumber = 1;
window.changePageNumber = function(amount) {
  if (amount > 0) {
    if (window.pageNumber >= 12) {
      return;
    }
    window.pageNumber += 1;
  } else {
    if (window.pageNumber <= 1) {
      return;
    }
    window.pageNumber -= 1;
  }
};

4. 验证按钮触发 #

页面左右箭头按钮调用plusSlides，只要完成步骤1的修改，点击按钮时会自动触发changePageNumber，无需额外修改按钮的onclick事件。

内容的提问来源于stack exchange，提问作者Mohammad Fathi Rahman