Zur Übersicht

Elementor / Swiper Fix für Edge + Lazy Loading + Lightbox-Probleme

Problem

Bei bestimmten Kundenumgebungen (vor allem Edge + Chromium Lazy Loading + langsame/virtuelle Systeme) kam es zu seltsamen Problemen mit Elementor-Slidern und Bildergalerien:

  • Slider-Pfeile reagierten nicht
  • Galerie ging genau einmal weiter und blieb dann hängen
  • Dots funktionierten weiterhin
  • Keine sichtbaren JS-Fehler
  • Problem nur auf manchen Geräten reproduzierbar

Besonders auffällig war diese Chromium-Meldung:

Images loaded lazily and replaced with placeholders.
Load events are deferred.

Ursache

Die Ursache lag offenbar in einer Kombination aus:

  • Elementor Navigation Binding
  • Swiper Transition States
  • Chromium Deferred Load / Lazy Loading
  • dynamisch erzeugter Elementor-Lightbox

Swiper selbst funktionierte weiterhin korrekt:

document.querySelector('.swiper').swiper.slideNext()

funktionierte jederzeit.

Das Problem lag in:

  • instabilen Navigation-Bindings
  • bzw. festhängenden Transition-/Animation-States.
  • Wichtigste Erkenntnis

Nicht auf:

window.load

oder Timeouts setzen.

Sondern:

Swiper direkt im Klickmoment holen.

Funktionierende Lösung

WordPress Snippet

add_action('wp_footer', function() { ?>
<script>

document.addEventListener('click', function(e) {

    const btn = e.target.closest(
        '.elementor-swiper-button-next, .elementor-swiper-button-prev'
    );

    if (!btn) return;

    // Elementors eigenen Handler blockieren
    e.stopPropagation();

    const isNext = btn.classList.contains('elementor-swiper-button-next');

    let swiperEl = null;

    // Elementor Lightbox
    if (btn.closest('.elementor-lightbox')) {

        swiperEl = document.querySelector('.elementor-lightbox .swiper');

    } else {

        // Normale Elementor Slider
        const widget = btn.closest('.elementor-widget');

        if (!widget) return;

        swiperEl = widget.querySelector('.swiper');

    }

    if (
        !swiperEl ||
        !swiperEl.swiper
    ) return;

    const swiper = swiperEl.swiper;

    // Swiper-Transition-Blockaden entschärfen
    swiper.animating = false;
    swiper.allowSlideNext = true;
    swiper.allowSlidePrev = true;

    // slideNext/slidePrev statt manueller Index-Berechnung
    // → funktioniert korrekt auch bei loop: true
    if (isNext) {

        swiper.slideNext(0);

    } else {

        swiper.slidePrev(0);

    }

}, {
    capture: true,
    passive: true
});

</script>
<?php }, 99);

Warum diese Lösung funktioniert

  • Kein window.load

Verhindert Probleme mit:

  • Deferred Load Events
  • Lazy Loading
  • dynamischen DOM-Rebuilds
  • Event Delegation

Funktioniert auch bei:

  • dynamischen Elementor-Lightboxen
  • nachträglich erzeugten DOM-Elementen
  • slideTo() statt slideNext()

Umgeht interne Swiper-Transition-Checks.

swiper.animating = false

Entschärft festhängende Animation-States.

swiper.setTransition(0)

Verhindert zusätzliche Transition-Probleme.

Hinweise

  • Nicht global auf allen Websites aktivieren
  • Als gezielten Fix für problematische Elementor-/Swiper-Setups verwenden

Besonders relevant bei:

  • Edge
  • Chromium Lazy Loading
  • Elementor Loop Carousel
  • Elementor Lightbox
  • langsamen Firmenrechnern
  • virtuellen Umgebungen
  • aggressivem Lazy Loading
  • Debugging-Erkenntnisse

Hilfreich zur Analyse:

document.querySelector('.swiper').swiper.slideNext()

Damit lässt sich schnell prüfen:

  • lebt Swiper noch?
  • oder ist nur die Navigation kaputt?

Das war im konkreten Fall der entscheidende Durchbruch.