swiper bleibt stehen

octek0815 · 20 März 2017, 08:40:46

Moin zusammen,

ich nutze den "swiper" Widget mit dem Parameter data-autoplay um die Wettervorhersage dazustellen.
Leider ist es so das beim Wechsel zwischen Pagebutton Seiten der "swiper" stehen belibt.
Wenn ich dann kurz den "swiper" auf die nächste Seite wische funktioniert "data-autoplay" wieder.

Kennt jemand das Problem und hat hierfür eine Lösung?

Viele Grüße
Olli

octek0815 · 29 Oktober 2017, 10:07:00

Gibt es denn wirklich keine Lösung bzw. hat sonst keiner das Problem?

Schalter · 14 Mai 2019, 00:22:25

Hallo. Hast du jemals eine Lösung dazu gefunden?
Ich nutze Chromium auf nem Pi und habe das gleiche Problem. Ich nutze auch mehrere Swiper auf einer Seite, Swiper im Swiper sozusagen. Habe auch schon ein weiteres Widget (Widget_swiper2.js, quasi einen Klon) erstellt, funktioniert aber leider auch nicht.

Im Forum habe ich noch folgendes gefunden:

Zitat von: Stivmaster am 25 Juli 2016, 16:28:48
Aufgefallen ist mir, wenn ich Frühzeitig, also während dem Laden umschalte, also content der Seite mit den Slidern wird ausgewählt, dann funktioniert auch der Swiper nachher.
Zudem ist mir aufgefallen, dass, wenn ich eben nicht vorzeitig umschalte und erst die Index seite fertig laden lasse, dann nach dem Umschalten im Swiperfeld auch der 2te Punkt (Swiperpunkt, ich hoffe ihr wisst was ich meine) fehlt.

Zitat von: takaze am 15 September 2016, 10:54:04
Guten Morgen zusammen,

ich habe gerade ein ähnliches Problem. Ich konnte die Ursache soweit eingrenzen, dass es offenbar mit Pagebutton, bzw. der Benutzung des Link widgets für das Umschalten auf andere Seiten zu tun hat.

Folgendes ist mir dabei aufgefallen:

1. Befindet sich der Swiper auf einer "Unterseite", ist also nach dem Neuladen nicht direkt sichbar, und das Neuladen der FTUI wird ohne (!) "Anker" vorgenommen, bzw initial aufgerufen, hängt dieser

zB => ...../fhem/ftui/index_page_top_demo.html => OHNE z.B. #page_content1.html

2. Wird FTUI mit einem zu pagetab bzw dem link widget gehörenden Anker mit einer anderen Seite ohne Swiper neu geladen hängt dieser ebenfalls

zB => ........./fhem/ftui/index_page_top_demo.html#page_content1.html

3. beim Neuladen der FTUI mit dem Anker der Unterseite, die den Swiper enthält, lässt sich dieser bedienen, sowohl mit tabs auch als mit "swipe"

zB => ...../fhem/ftui/index_page_top_demo.html#page_content2.html

4. das Neuladen der Seite nach bedienen des Swiper führt dazu, das die standart index seite geladen wird, was auch zum hängen des Swipers führt

zB => ...../fhem/ftui/index_page_top_demo.html#page_content2.html#room3

Ich hoffe ich habe mich einigermaßen verständlich ausgedrückt. Zum "debuggen" habe ich setstates demo seite index_page_top_demo.html auf der zweiten Unterseite den Demo Swiper von hier verpasst und sonst nichts verändert. Ich häng euch die Dateien hier mal an.

Viele Grüße,
Florian

https://forum.fhem.de/index.php/topic,54735.0.html

Beste Grüße, Schalter

yersinia · 14 Mai 2019, 09:42:07

Ja, es gab schonmal Lösungsansätze dazu. Zum Beispiel beim UWZ-Swiper.
Bei mehreren Swipern auf einer Seite benötigen die Swiper ids sonst kann das Framework die nicht auseinanderhalten. Ich meine, das würde auch über data-tabclass gehen.

User OdfFhem hat im Calview Widget eine neuere Swiper-Version benutzt, die wohl auf ids verzichten kann.

OdfFhem · 14 Mai 2019, 18:50:48

Eine kleine Korrektur: auch im überarbeiteten calview-Widget wird die mit FTUI ausgelieferte swiper-Version verwendet.

Schalter · 14 Mai 2019, 23:22:03

Danke für die Antworten

Aus dem UWZ-Thread geht folgendes hervor:

Zitat von: ToM_ToM am 29 Juli 2018, 15:58:06
also das mit dem "Hin und Hertanzen" funktioniert. Aber auch nur dann wenn ich meiner Seite beim Öfnnen gleich die korrekte Unterseite mitgebe. Öffne ich die Startseite und wechsle dann auf die Wetter-Seite, passiert natürlich nichts, da ja auch der Swiper nicht korrekt geladen wurde. Da wird dann zwar nach einem Resize der Swiper geladen und mir angezeigt (sehe ich ja an den Page-Punkten), aber der verrückte Autoplay-Tanz startet dann erst sobald ich einmal swipe.

...nicht ganz zufriedenstellend...

Das mit data-tabclass und einer id verstehe ich leider nicht ganz, ich weiß wie ich ids setze, bekomme es aber nicht hin.

Vielleicht nochmal zum reproduzieren
ich habe meine Indexseite.html in der meine pagebutton Funktion hinterlegt ist.
Klicke ich auf das Haus Symbol und warte, funktioniert der Swiper richtig.
Klicke ich auf den Regenschirm und warte, funktioniert der Swiper richtig.
Klicke ich jetzt wieder auf das Haus Symbol, funktioniert nur noch der erste Swiper, nicht mehr der zweite.
Klicke ich wieder auf den Regenschirm, funktioniert auch hier nur noch der erste Swiper.
Erst nach einem komplettem Refresh geht wieder alles.

Anbei die drei Seiten, habe es aufs minimalste reduziert, ideal zum testen.

yersinia · 15 Mai 2019, 16:56:56

Zitat von: Schalter am 14 Mai 2019, 23:22:03Das mit data-tabclass und einer id verstehe ich leider nicht ganz, ich weiß wie ich ids setze, bekomme es aber nicht hin.

Hier ein Beispiel:

Code Auswählen

<div data-type="swiper"
    data-tabclass="wetterswiper"
    class="">
    <ul>
            <li>Wetter-Swiper Slide 1</li>
            <li>Wetter-Swiper Slide 2</li>
    </ul>
</div>
<div data-type="swiper"
      data-tabclass="tankstellenswiper"
      class="">
         <ul>
               <li>Tankstellen-Swiper Slide 1</li>
               <li>Tankstellen-Swiper Slide 2</li>
         </ul>
</div>

MMn fehlt in deiner indexseite noch ein

Code Auswählen

<link rel="stylesheet" href="lib/swiper.min.css" type="text/css" />
Möglicherweise in den anderen HTML Seiten auch

Und hast du wirklich die Swiper ineinander verschachtelt?

Schalter · 15 Mai 2019, 18:15:04

Zitat von: yersinia am 15 Mai 2019, 16:56:56
Und hast du wirklich die Swiper ineinander verschachtelt?

Joah, warum nicht

https://forum.fhem.de/index.php/topic,37378.msg938953.html#msg938953
schau dir das webm Video an
Habe es zuerst mir dem widget Rotor versucht, aber dort funktionieren class>sheet>row usw nicht.

Habe es jetzt mit tabclass versucht, funktioniert aber leider auch nicht. Kann es am Browser liegen? Ich bin hier immer mit Chrome/Chromium unterwegs.

yersinia · 15 Mai 2019, 20:56:46

Zitat von: Schalter am 15 Mai 2019, 18:15:04
Joah, warum nicht
https://forum.fhem.de/index.php/topic,37378.msg938953.html#msg938953
schau dir das webm Video an
Habe es zuerst mir dem widget Rotor versucht, aber dort funktionieren class>sheet>row usw nicht.

Weil es mich wundert, dass es (im FTUI) out-of-the-box funktionieren würde.

Allerdings, die API gibt es her:
https://github.com/nolimits4web/Swiper/issues/1084
https://jsfiddle.net/imoskvin/s0fm20m6/
https://codepen.io/MGHollander/pen/jERyrX

Ob das swiper_widget dies unterstützt, kann ich nicht sagen.

Zitat von: Schalter am 15 Mai 2019, 18:15:04Habe es jetzt mit tabclass versucht, funktioniert aber leider auch nicht. Kann es am Browser liegen? Ich bin hier immer mit Chrome/Chromium unterwegs.

Kann sein, halte ich aber für unwahrscheinlich.

Du könntest versuchen den Swiper direkt zu implementieren (also nicht als widget sondern direkt als HTML/CSS/JS code; Beispiele siehe Links oben) - die jquery.js ist ja sowieso eingebunden.

Schalter · 17 Mai 2019, 21:40:40

Danke für die Tipps, aber hat leider nix gebracht.

Ich habe mittlerweile rausgefunden das es auch mit nur einem Swiper Widget nicht funktioniert. Also meine Verschachtelung hat anscheinend garnix damit zu tun.
Es liegt am "noswipe", ist dieses Attribut gesetzt, funktioniert der autoplay nicht mehr nach dem erneuten Aufrufen der Seite.

Anbei jetzt noch mal die drei Seiten zum reproduzieren.

Indexseite mit dem Häuschen und dem Schirm, klicke ich auf das Häuschen und danach auf den Schirm, läuft der Swiper mit autoplay.
Klicke ich wieder aufs Häuschen und wiederum auf den Schirm läuft der autoplay des Swipers nicht mehr.

OdfFhem · 18 Mai 2019, 08:03:11

Zitat
Es liegt am "noswipe", ist dieses Attribut gesetzt, funktioniert der autoplay nicht mehr nach dem erneuten Aufrufen der Seite.

Die Einschränkung kann ich mit dem Beispiel nicht nachvollziehen, da der Swiper mit und auch ohne noswipe beim erneuten Aufruf der weatherseite.html kein Autoplay mehr ausführt.
Ich vermute die Ursache eher in der Art der Navigation und wie dabei eine Seite zur Verfügung gestellt wird.
Im Beispiel wird die Seite scheinbar einmal geladen und dann beim Wechsel einfach nur wieder angezeigt; der Swiper müsste vermutlich reanimiert werden.

Zum Test habe ich einmal eine Seite mit dem Pagetab-Widget angelegt. Hier funktioniert der Swiper mit/ohne noswipe - egal wie oft man die Seite wechselt.
Im Test-Szenario wird eine Seite beim Einblenden auch jeweils neu geladen, so dass der Swiper immer wieder initialisiert wird.