Swiper Problem mit Elementgröße

Druckbare Version

12.09.2022, 09:50
McMatty

Swiper Problem mit Elementgröße

Liebe Community

Jetzt möchte ich es hier mit einer Frage zu einem Swiper "Problem" versuchen:

Ich habe beim Swiper ein eigenartiges Verhalten festgestellt, wenn er im Header mit voller Browser-Fensterbreite eingebunden ist.

Er ist beim Öffnen der Seite leicht vergrößert - es scheint der seitliche Bedarf des Scrollbalkens zu sein(?) - und "springt" bei geringfügiger Fenstergrößen-Änderung (Fensterhöhe) zur exakten Größe und bleibt so bis die Seite wieder neu aufgerufen wird (auch F5). Dann ist er wieder das "Eitzerl" zu groß ... Im Main Container (feste Breite) scheint es nicht so zu sein.
Es scheint das Element (Bild, Galerie ...) im Container zu reagieren, nicht der Container.

Der Slick Slider zeigt dieses Verhalten nicht. Ich bin draufgekommen, weil ich sie zu Testzwecken beide im Header hatte.

Hat jemand eine Idee, was das sein könnte?

Danke
Grüße
Matt
12.09.2022, 10:50
derRenner

Hallo,

ich vermute ein CSS-Thema dahinter.
Hast du einen Link für mich/uns? ... gerne auch per PN
12.09.2022, 11:41
McMatty

Zitat:

Zitat von derRenner

Hallo,

ich vermute ein CSS-Thema dahinter.
Hast du einen Link für mich/uns? ... gerne auch per PN

Hallo

https://picturestory.at

Beste Grüße
Matt
12.09.2022, 11:44
Spooky

Moderation: Beiträge in einen eigenen Thread verschoben.

Bitte nicht in bestehende Threads posten, wenn das nichts mehr mit dem Original Thread zu tun hat.
12.09.2022, 12:30
McMatty

Zitat:

Zitat von Spooky

Moderation: Beiträge in einen eigenen Thread verschoben.

Bitte nicht in bestehende Threads posten, wenn das nichts mehr mit dem Original Thread zu tun hat.

Wie soll ich verfahren? Das Forum ist etwas unübersichtlich für mich. Erstelle ich einen neuen Thread und wo?

Edit: ah ja schon verschoben. Danke
12.09.2022, 13:56
derRenner

Ja, ich kann's im Firefox nachvollziehen - bei mir ist's ein gap von 17px. Entsteht zwischen .swiper-wrapper und .swiper-slide

Versuche mal .swiper-wrapper auf overflow: hidden!important zu setzen

Was passiert, wenn du eine andere Transition wählst? z.b. slide statt fade

Hast du vielleicht <script> dazu zweimal/mehrmals mit unterschiedlichen Inhalten eingefügt?

Lass mal das swiper.css-File als letzte laden bzw. versuche mal die Reihenfolge zu ändern, ob ggf. ein anderes Script "überschreibt".
Nimm mal das Parallax-Script raus und teste - ggf. stört sich das gemeinsam. Auch mal ohne dem panorama360 und/oder anderen Skripten testen
12.09.2022, 17:33
McMatty

Zitat:

Zitat von derRenner

Ja, ich kann's im Firefox nachvollziehen - bei mir ist's ein gap von 17px. Entsteht zwischen .swiper-wrapper und .swiper-slide

Versuche mal .swiper-wrapper auf overflow: hidden!important zu setzen

Was passiert, wenn du eine andere Transition wählst? z.b. slide statt fade

Hast du vielleicht <script> dazu zweimal/mehrmals mit unterschiedlichen Inhalten eingefügt?

Lass mal das swiper.css-File als letzte laden bzw. versuche mal die Reihenfolge zu ändern, ob ggf. ein anderes Script "überschreibt".
Nimm mal das Parallax-Script raus und teste - ggf. stört sich das gemeinsam. Auch mal ohne dem panorama360 und/oder anderen Skripten testen

Hallo

OK (ich habe übrigens bei keinem der Versuche den Prod Cache neu aufgebaut, nur hier und da den Browser cash gelehrt bzw. mal in der Systemst. Daten bereinigt(?!)
- das Rausschmeißen der anderen Skripte bewirkt nichts.
- was du mit

Zitat:

<script> dazu zweimal/mehrmals mit unterschiedlichen Inhalten eingefügt

meinst, verstehe ich nicht. Ich habe die Extension installiert ...
- mit dem css hatte ich früher schon experimentiert; jetzt nach deinen Vorschlägen, auch das swiper-bundle.css zum Schluss drüberlaufen lassen:
overflow: hidden bringt nichts ->
-> !!! dabei habe ich aber folgendes festgestellt: habe spaßhalber stattdessen mal width: 100%!important eingegeben.
-> folgendes passiert (hatte ich schon mal zufällig entdeckt, weil ich ein paar Formatierungen des Swiper geändert habe; mit dem .swiper-slide Selektor):
Seiten Neuaufbau: erstes Dia passt, nächstes rückt diese 17px nach links, man sieht dahinter das vorige; das nächste rückt wieder diese Breite nach links, man sieht also rechts eine Treppe der dahinterliegenden Slides
- Das Ganze ist bei Slide ebenso; hier sieht man natürlich keine dahinterliegenden Slides, sondern beim 2. Slide einen 17px Streifen des nächsten, dann einen 34px Sreifen des nächsten ... es rückt also mit jedem Slide diese Breite weiter nach links

Also der css Zusammenhang scheint irgendwie plausibel, aber offenbar nicht meine Formatierungen(?). Kann das keiner bei anderen Installationen nachvollziehen, oder noch nicht aufgefallen, weil außer dem Hacker nichts sichtbar ist.

Grüße
Matt
15.09.2022, 09:23
McMatty

Danke noch einmal an derRenner für die Ansätze. Leider erfolglos. Ich habe noch mit meinem css experimentiert und keinerlei nur entfernte Auswirkung auf das Problem gefunden, außer negativ das eigenartige Überschiebe-Verhalten (siehe voriger Post). Und bei kontinuierlicher Wiedergabe - wenn ich eine Zoom Transition einsetze - setzt er am Ende des slidens (Slide und Fade) des ersten Slides (nur das, ab dem zweiten Durchgang) dieses mit einem Hacker auf Ausgangsgröße. Bemerkt man bei entsprechenden Zeiteinstellungen Auto/Übergangsgeschwindigkeit (Hängt wohl auch mit der Definition der swiper-slide Größe im wrapper zusammen?)

- Swiper probeweise deinstalliert. Der Core Slider ist OK (kann aber eben nix)
- Slick Slider ist ebenfalls OK (leider nur Crossfade, kein Fade, und auch nicht mehr jung); ansonsten bin ich sehr zufrieden mit dem; es geht sogar out of the box Continuous Slide

Ich würde mich jetzt mit einer Vermutung, dass es an meinem css liegt, schwer tun. Außer es geht hier um ganz grundlegenden "modernen" Aufbau. Das Theme, auf dem ich aufgebaut habe, ist zumindest nicht ganz neu ... doch funktioniert ja alles andere ...

Und niemand der Profis hier gehört zu den über 15 000 Nutzern des Swiper, die mir bestätgen können, dass es unter Vollbreite bei anderen Installationen keine Probleme gibt?
Schade. Ist halt nur unter bestimmten Bedingungen eisetzbar, wie gesagt mit fester Breite und wenn man Fade nutzen möchte.

Schöne Grüße
Matt
15.09.2022, 19:06
derRenner

du schreibst ja in einem deiner ersten Einträge, dass das nur im <header> auftaucht - im <main> stellt sich das gap nicht ein.
Daraus resultiere ich, dass es ggf. nicht die Swiper-Installation selbst ist, sondern doch ggf. dein CSS :D
15.09.2022, 21:58
McMatty

Zitat:

Zitat von derRenner

du schreibst ja in einem deiner ersten Einträge, dass das nur im <header> auftaucht - im <main> stellt sich das gap nicht ein.
Daraus resultiere ich, dass es ggf. nicht die Swiper-Installation selbst ist, sondern doch ggf. dein CSS :D

Na ja, wenn es mit der vollen Bildschirmbreite zu tun hat und eben z. B. mit dem Scrollbalken (muss doch irgendwie "erkannt" werden?) und wenn die anderen Dinger sich nicht so verhalten? :D

Ich schau mir das noch ohne Scrollbalken an ...

Edit: Es ist der Scrollbalken! Kein Scrollbalken, kein Hacker. Meinst du dann noch immer, dass das mein css ist? Nur beim Swiper?
Woher kommt die Info, dass der Scrollbalken zur Berechnung der Breite zu berücksichtigen ist bzw. wo wird das verarbeitet?

Edit2: Präzisierung zu dem Hacker beim Sliden/Faden, wenn man Zoomeffekt anwendet, also Transition Scale: bei der Swiper Einstellung KONTINUIERLICH (beim Sliden muss man das verwenden, bei Fade kann man es vermeinden) geht immer bei dem ersten Slide am Ende der Animation das Slide in die Größen-Ausgangsposition für den nächsten Durchgang. Ist sicher (auch) kein css von mir (glaube ich halt). :D
Was solls, ich belasse meine Slick Slider im Header und verwende den Swiper, wo es mit den gewünschten Einstellungen funktioniert. Mein Favorit ist wie gesagt das Fade ohne Cross-, das der Slick leider nicht kann.
19.09.2022, 17:10
McMatty

[gelöst] kontinuierliches Sliden

Zitat:

Zitat von McMatty

Edit2: Präzisierung zu dem Hacker beim Sliden/Faden, wenn man Zoomeffekt anwendet, also Transition Scale: bei der Swiper Einstellung KONTINUIERLICH (beim Sliden muss man das verwenden, bei Fade kann man es vermeinden) geht immer bei dem ersten Slide am Ende der Animation das Slide in die Größen-Ausgangsposition für den nächsten Durchgang. Ist sicher (auch) kein css von mir (glaube ich halt). :D
Was solls, ich belasse meine Slick Slider im Header und verwende den Swiper, wo es mit den gewünschten Einstellungen funktioniert. Mein Favorit ist wie gesagt das Fade ohne Cross-, das der Slick leider nicht kann.

Das konnte ich lösen. War in sofern css von mir, als ich bei der Erstellung nicht wusste, dass beim Swiper die "-duplicate" zu berücksichtigen sind. Da ich in anderem Zusammenhang auf die Swiper Technik mit dem "Duplicate" aufmerksam wurde, habe ich zu den Transition Selektoren noch die mit dem -duplicate Zusatz ergänzt. Und siehe da, das erste Dia "hackt" nicht mehr beim nächsten Durchgang, wenn man "kontinuierlich" eingestellt hat.

Für alle, die Swiper verwenden und nicht der Meinung sind, dass Bewegung im Webdesign out ist.