Active

[Bug Report] Uncaught TypeError: S.swiper.pause is not a function when executing “Pause Slider” Action (Swiper v9+ Autoplay API Compatibility)

1

Dear Greenshift Developer Team,

I have encountered a critical JavaScript error when using the “Pause Slider” custom action in the Interaction Layers targeting a Slider and Carousel block (e.g., class selector .sw-bento-1).

While “Move Slider” works perfectly, triggering “Pause Slider” immediately throws the following traceback and breaks the execution chain:

🛑 Error Traceback:

Uncaught TypeError: S.swiper.pause is not a function
    at index.js?ver=4.9:1:12747
    at Array.forEach (<anonymous>)
    at gspb_execute_inter_Actions (index.js?ver=4.9:1:12356)
    at gspb_trigger_inter_Actions (index.js?ver=4.9:1:10134)
    at t.addEventListener.capture (index.js?ver=4.9:1:3037)

🔍 Root Cause Analysis:

  1. Modern Swiper Bundled: Greenshift currently bundles a modern version of Swiper (v12.x / v11.x) under libs/swiper/swiper-bundle.min.js.
  2. Missing legacy prototype method: In modern Swiper (v6+ and specifically v9+), the .pause() and .play() methods no longer exist directly on the initialized Swiper instance prototype (e.g., S.swiper).
  3. Autoplay Module Control: Instead, controlling the autoplay lifecycle must go through the .autoplay module subclass, specifically calling:
    • S.swiper.autoplay.stop() or S.swiper.autoplay.pause() to pause/stop.
    • S.swiper.autoplay.start() to resume.
  4. Outdated Reference in Interaction Script: Currently, Greenshift’s frontend interaction script (index.js) is still trying to call the legacy S.swiper.pause() directly on the Swiper instance, leading to the is not a function crash.

🛠️ Suggested Code Fix for Greenshift Core (index.js / Interaction Handler):

In your interaction action handler where Greenshift controls the slider playback, please update the call to support both the modern Autoplay API and legacy fallbacks:

// Recommended robust handling for modern Swiper Autoplay
if (S.swiper) {
    if (S.swiper.autoplay && typeof S.swiper.autoplay.stop === 'function') {
        // Modern Swiper v6/v9/v11/v12 way
        S.swiper.autoplay.stop(); 
    } else if (typeof S.swiper.pause === 'function') {
        // Fallback for legacy Swiper versions
        S.swiper.pause(); 
    }
}


Similarly, for the “Play/Resume Slider” action, you can update it as follows:

if (S.swiper) {
    if (S.swiper.autoplay && typeof S.swiper.autoplay.start === 'function') {
        S.swiper.autoplay.start(); 
    } else if (typeof S.swiper.play === 'function') {
        S.swiper.play(); 
    }
}

Updating this logic will safely resolve the JS error and allow Greenshift users worldwide to utilize the “Pause Slider” action seamlessly without library dependency conflicts.

Thank you for your incredible work on Greenshift Builder! Looking forward to seeing this compatibility patch in the next update.

Thank you for your time and support.

hayulthegoatgmail-com

Replies

Response

  1. Thank you, will be added in nearest update

Post a Reply