Fehler: Bug festgestellt - Die Slides im 2. Tab werden manchmal vertauscht, Pfeile-Navigation funktioniert nur verkehrt herum

Felix Kautnik's Avatar

Felix Kautnik

07 Sep, 2020 09:33 AM

Produkt: Slider Contao
Contao-Version: 4.4.51
Browser und Browserversionen: Chrome 85.0.4183.83

Guten Tag,

der Slick-Slider in unserer Installation funktioniert nicht richtig bzw. weist einen für uns nicht nachvollziehbaren Bug auf.
In einigen Slidern wird im 2. Tab das zweite Slide anstelle des ersten Slides angezeigt, zudem lässt sich dort mit den Navigationpfeilen nur zurück navigieren. Das tritt bei unterschiedlichen Slidern auf, die jedoch gleich aufgebaut sind.

Es sieht ein bisschen danach aus, als ob das erste Slide nicht richtig ausgeblendet wird. In einem Slider fallen die übereinander hängenden Überschriften der Slides auf. Der Aufbau ist jedoch auch hier gleich.

Wir bitten um eine zeitnahe Antwort zu diesem Problem, da der Slick-Slider-Bug auf einer Live-Seite auftritt.

Freundliche Grüße

Felix Kautnik

Verwendete Contao-Version: 4.4.51
PHP-Version: 7.2.33
Slick-Slider: v2.0.16

  1. 1 Posted by Felix Kautnik on 07 Sep, 2020 09:49 AM

    Felix Kautnik's Avatar
  2. 2 Posted by Andreas Bohlig on 07 Sep, 2020 10:05 AM

    Andreas Bohlig's Avatar

    Noch zur Ergänzung den Link zum deutschen Inhalt.
    https://www.jotec.com/de/produkte/abdominelle-stentgrafts/e-vita-abdominal-xt.html
    Das Problem ist beim unteren Slider zu sehen. Auf dem TAB "Stentgraf" funktioniert er noch wie gewünscht. Auf dem zweiten TAB "Einführsystem" wird das 2. Bild angezeigt, obwohl die Slidernavigation unten das erste Bild anzeigt. Man kann nicht nach rechts sliden, nur nach links. Danach funktioniert der Slider wieder wie gewohnt.

    Wenn man die beiden Sildes tauscht, bekommt wieder der Slider im 2. TAB das Problem, egal welchen Slider man hier einbindet.

    Gruß A. Bohlig

  3. Support Staff 3 Posted by RockSolid Theme... on 07 Sep, 2020 12:26 PM

    RockSolid Themes's Avatar

    Vielen Dank für Ihre Frage.

    Damit der Slider seine Größe korrekt berechnen kann, muss das Tab-Skript einen Window-Resize-Event auslösen nachdem der Tab mit dem Slider eingeblendet wurde.

    Sie können dafür z. B. folgendes JavaScript verwenden:

    jQuery('.ce_tabcontrol .tab-link').on('click', function() {
        setTimeout(function() {
            var evt = document.createEvent('HTMLEvents');
            evt.initEvent('resize', true, true);
            window.dispatchEvent(evt);
        });
    });
    
  4. 4 Posted by Felix Kautnik on 07 Sep, 2020 12:54 PM

    Felix Kautnik's Avatar

    Vielen Dank für Ihre Antwort.
    Ich habe das Script eingebunden, jedoch bleibt der oben beschrieben Fehler noch bestehen.

    Viele Grüße,
    Felix Kautnik

  5. Support Staff 5 Posted by RockSolid Theme... on 07 Sep, 2020 12:59 PM

    RockSolid Themes's Avatar

    Wir konnten das Skript auf Ihrer Seite nicht entdecken. An welcher Stelle haben Sie es eingefügt?

  6. 6 Posted by Andreas Bohlig on 07 Sep, 2020 03:11 PM

    Andreas Bohlig's Avatar

    Sorry, das war auf unserem Staging Server. Jetzt steht es auch auf dem Liveserver zur Verfügung.

  7. 7 Posted by Andreas Bohlig on 07 Sep, 2020 03:19 PM

    Andreas Bohlig's Avatar

    Wir haben das Skript relativ am Ende in die files/js/scripts.js integriert.

  8. Support Staff 8 Posted by RockSolid Theme... on 08 Sep, 2020 10:54 AM

    RockSolid Themes's Avatar

    Das Tab-Script das Sie einsetzen blendet anscheinend den Tab nicht direkt nach dem Klick ein.

    Mit dem Bootstrap-Tab-Event shown.bs.tab sollten Sie den korrekten Zeitpunkt abfangen können:

    jQuery('.ce_tabcontrol .tab-link').on('shown.bs.tab', function() {
        var evt = document.createEvent('HTMLEvents');
        evt.initEvent('resize', true, true);
        window.dispatchEvent(evt);
    });
    
  9. 9 Posted by Andreas Bohlig on 08 Sep, 2020 02:58 PM

    Andreas Bohlig's Avatar

    Das sieht sehr gut aus. Es scheint zu funktionieren. Man lernt doch nie aus.
    Wann ist dieses Skript einzusetzen? Empfiehlt sich das grundsätzlich?

    Vielen Dank für die Unterstützung.

    Beste Grüße
    Andreas Bohlig

  10. Support Staff 10 Posted by RockSolid Theme... on 09 Sep, 2020 09:49 AM

    RockSolid Themes's Avatar

    Empfiehlt sich das grundsätzlich?

    Einen Window-Resize event zu triggern nachdem man Inhalte einblendet die fremde JavaScript-Widgets enthalten ist grundsätzlich eine gute Idee aus unserer Sicht, da der Resize-Event von den meisten Skripten behandelt wird.

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac