Swiper fritzmg (Responsive Design)

[hendele]

Hallo liebe Gemeinde,
ich habe nun das Objekt Swiper/Fritzmg eingebunden. Wie kann ich nun über dieses Modul ein 'Responsive Design' bezüglich des Slider machen, so daß je nach Bildschirmgröße das graphische Objekt in der richtigen Auflösung angezeigt wird.
Danke
Grüße
Erwin

[Spooky]

Wenn du damit Bilder im Slider meinst: das hat ja nichts mit dem Slider direkt zu tun, sondern das machst du mit den Responsive Image Size Settings von Contao selbst.

[McMatty]

Hallo Spooky

Ich hoffe, hier bin ich einigermaßen richtig.

Ich habe beim Swiper ein eigenartiges Verhalten festgestellt, wenn er im Header mit voller 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.

Ich hatte meine Konfiguration vermutet, doch zeigt unter gleichen Bedingungen der Slick Slider dieses Verhalten nicht. Ich bin draufgekommen, weil ich sie zu Testzwecken beide im Header hatte.

Eine Idee, was das sein könnte? Kann ich das mit den Header Einstellungen oder Swiper css korrigieren?

Danke
Grüße
Matt

Edit: Es scheint das Element (Bild, Galerie ...) im Container zu reagieren, nicht der Container.

[Himbeerrot]

Hallo,

ich hab den Swiper in zwei verschiedenen Contao-Installationen eingefügt.
beide Contao 4.13.23
beide fritzmg/contao-swiper 4.3.1

In einer werden die Bilder im Swiper responsive auf den umgebenden Container verkleinert (über CSS img { width:100%; height:auto }
In der zweiten Installation das gleiche CSS, aber die Bilder können nicht verkleinert werden, weil der Swiper über JavaScript feste Breiten in den Quelltext schreibt:

<div class="ce_image block swiper-slide swiper-slide-duplicate swiper-slide-prev" data-swiper-slide-index="3" style="width: 800px;opacity: 1;transform: translate3d(0px, 0px, 0px);transition-duration: 0ms;" role="group" aria-label="4 / 4">

Ich finde nicht, wie ich abstellen kann, dass die Breite in den Quelltext geschrieben wird. Das ist nicht von mir aktiviert worden, sondern passiert einfach.

Viele Grüße
Holger

[Spooky]

Die Breite wird automatisch gesetzt, je nachdem wie du den Swiper konfiguriert hast (slidesPerView etc.)

[Himbeerrot]

Hallo Spooky,
danke für deine Antwort.

Was muss ich denn einstellen, damit keine Breite gesetzt wird?
Ich hänge einen Screenshot meiner Einstellungen an.

Übrigens danke, dass du den Swiper als Erweiterung bereit stellt!
Ich finde ihn klasse.

Viele Grüße
Holger

[Spooky]

Anzahl der sichtbaren Slides => auto

Du wirst dann aber auch noch das CSS anpassen müssen.

[Himbeerrot]

Danke für die Antwort.

Das hatte ich schon probiert und habe es eben nochmal ausprobiert.
Der Swiper schreibt noch immer eine feste Breite in den Quelltext:
<div class="ce_image block swiper-slide" data-swiper-slide-index="1" style="width: 800px; transition-duration: 0ms; opacity: 1; transform: translate3d(-1600px, 0px, 0px);" role="group" aria-label="2 / 4">

Aber jetzt hab ich eine Lösung per CSS gefunden:

.ce_swiperStart .ce_image {
width: 100%!important;
height: auto;
}
bewirkt, dass die Bilder sich responsive in der Breite anpassen.

Viele Grüße
Holger

[Spooky]

Danke für die Antwort.

Das hatte ich schon probiert und habe es eben nochmal ausprobiert.
Der Swiper schreibt noch immer eine feste Breite in den Quelltext:
<div class="ce_image block swiper-slide" data-swiper-slide-index="1" style="width: 800px; transition-duration: 0ms; opacity: 1; transform: translate3d(-1600px, 0px, 0px);" role="group" aria-label="2 / 4">

Poste einen Link zur Seite.

[Himbeerrot]

Hallo Spooky,
hier der Link zur Seite, der Swiper ist unten:

https://www.contao-stuttgart-ludwigs...kenstrich.html

Responsive geht jetzt durch das CSS, ich bin voll zufrieden!

Gruß
Holger

[Spooky]

Das Problem ist in deinem Fall das Grid Layout, wodurch die linke Spalte keine fix definierte Breite hat und durch deren Inhalt beeinflusst werden kann. Die Bilder im Swiper haben 800px Breite, daher wird auch die linke Spalte 800px breit. Hat also nichts mit dieser Extension zu tun.