Swiper.js滑块拖动及滑动全程函数持续执行问题

问题分析 #

现有代码仅通过setTranslate事件触发setImagePositions()，但在freeMode（自由模式）下，滑块惯性滑动阶段该事件不会持续触发；同时代码存在选择器错误（$("swiper-slide")遗漏类名前缀.），导致函数无法正确作用于滑块元素，最终出现仅抓取拖动时触发函数的情况。

修复方案 #

1. 修正选择器错误：将$("swiper-slide")改为$(".swiper-slide")，确保能选中所有滑块元素。
2. 补充监听事件：除setTranslate外，添加touchMove（用户拖动时）和freeModeMove（freeMode惯性滑动时）事件监听，覆盖从拖动开始到滑块停止的完整流程。

完整修正后的JS代码 #

let parallaxAmount = 49;
let verticalAmount = 60;
let rotationAmount = 6;

let swiper = new Swiper('.swiper', {
  slidesPerView: 4,
  centeredSlides: true,
  spaceBetween: 20,
  freeMode: {
    enabled: true,
  },
});

function setImagePositions() {
  // 修正选择器，添加类名前缀
  $(".swiper-slide").each(function (index) {
    let targetElement = $(this);

    let elementOffsetLeft =
      targetElement.offset().left +
      targetElement.width() -
      $('.swiper').offset().left;
    let progressLeft =
      elementOffsetLeft / ($('.swiper').width() + targetElement.width());

    let elementOffsetCenter =
      targetElement.offset().left +
      targetElement.width() / 2 -
      $('.swiper').width() / 2;
    let parentWidth = $('.swiper').width() + targetElement.width();
    let progressCenter = elementOffsetCenter / parentWidth;

    let progressCenterInvert = progressCenter;
    if (progressCenterInvert < 0) {
      progressCenterInvert = progressCenterInvert * -1;
    }

    let imageMoveDistance = parallaxAmount * progressLeft;
    if (imageMoveDistance > parallaxAmount) {
      imageMoveDistance = parallaxAmount;
    } else if (imageMoveDistance < 0) {
      imageMoveDistance = 0;
    }

    targetElement
      .find(".swiper-slider-inner")
      .css(
        "transform",
        `translateY(${verticalAmount * progressCenter}%) rotate(${rotationAmount * progressCenter}deg)`
      );
  });
}

// 监听多个事件，覆盖拖动和惯性滑动全程
swiper.on('setTranslate', setImagePositions);
swiper.on('touchMove', setImagePositions);
swiper.on('freeModeMove', setImagePositions);

事件说明 #

• touchMove：用户触摸拖动滑块时持续触发，确保拖动过程中实时更新元素位置。
• freeModeMove：freeMode下滑块惯性滑动时持续触发，覆盖松开手后的滑动阶段。
• setTranslate：处理滑块定位的基础事件，确保初始加载和滑动结束后的最终状态更新。

修改后，setImagePositions()会在从用户开始拖动滑块到滑块完全停止的整个过程中持续执行，实现预期的视差和旋转效果。

内容的提问来源于stack exchange，提问作者Kuci