Swiper-Slider und Sichtbarkeitsklassen

[quintacom]

Ich müsste in einem Swiper-Slider, der sich oben in einem Nachrichten-Beittrag (Portfolio) befindet, bei Bedarf 2 Bilder nebeneinander darstellen. Das natürlich nur für die Desktop-Darstellung. Bei Tablet- und Smartphone-Ansicht soll dann ganz normal ein Bild zentriert dargestellt werden.

Habe dazu den beiden betreffenden Bildern unter "Positions-Einstellungen" die Optopn "Position: Absolute" (mit 10% Abstand links bzw. rechts) gewählt. Wenn ich das Element "Swiper-Slider Trenner" zwischen die beiden Bildern ausblende, klappt die Darstellung. Wenn ich allerdings, so war jedenfalls meine Idee, dem "Swiper-Slider Trenner" die Sichtbarkeits-CSS-Klasse "Nur Smartphone und Tablet" gebe, greift diese anscheinend nicht. Hatte erwartet, dass dann eben nur für Desktops der Trenner nicht verwendet wird und ansonsten schon.

Kann jemand etwas dazu sagen, habe ich einen Denkfehler oder hat eine andere Idee, wie man das umsetzen könnte?

[Tom]

Hi!

Ich würde den Swiper-Slider Aufbau nicht ändern. Das kann zu Problemen im Script führen.

Der Swiper hat für die Device-Darstellung eine Option.

Diese befindet sich in der File:
customelement_swiperslider_start.html5

Template anlegen:
Contao > Layout > Templates > customelement_swiperslider_start (damit bleiben die Änderungen updatesicher)

breakpoints: {
768: {
slidesPerView: 1,
spaceBetween: 0,
}

Hier würde ich einen weitern Breakpoint für Tablets ergänzen.


Schöne Grüße
Tom

[quintacom]

Ok, wenn ich dort eintrage:

breakpoints: {
1024: {
slidesPerView: 1,
spaceBetween: 0,
}

und im Swiper-Slider-Startelement "Anzahl der Spalte" 2 eintrage, werden mir bei Displays über 1024px zwar 2 Bilder per Slide angezeigt, aber dann natürlich immer.
Oben beschriebene Situation bei mir war aber, dass ich bei Bedarf (also individuell) im Slider die Möglichkeit haben möchte, mal 2 Bilder oder nur 1 Bild per Slide darstellen lassen zu können.

Wenn man einen weiteren Breakpoint z.B. 1024 ergänzt, funktioniert auf Desktops dann gar kein Sliding mehr und es wird immer ein Bild angezeigt. Das nur so nebenbei beim Testen bemerkt.

[Tim]

Das letzte Komma in einem JS-Objekt darf nicht gesetzt sein. Das muss weg.

Und je nach dem wie das Snippet sitzt muss das "breakpoints" Objekt natürlich auch geschlossen sein.

breakpoints:
{
  768: { slidesPerView: 1, spaceBetween: 0 },
  1024: { slidesPerView: 2, spaceBetween: 0 }
}

[quintacom]

Das letzte Komma in einem JS-Objekt darf nicht gesetzt sein. Das muss weg.

Und je nach dem wie das Snippet sitzt muss das "breakpoints" Objekt natürlich auch geschlossen sein.

breakpoints:
{
768: { slidesPerView: 1, spaceBetween: 0 },
1024: { slidesPerView: 2, spaceBetween: 0 }
}

Ja ok Tm. Das war mein Fehler.

Allerdings bleibt das eigentliche Problem, dass ich nicht individuell mal 2 Bilder, mal 1 Bild je Slide im gleichen Swiper-Slider setzen kann. Würde die Sichtbarkeits-CSS-Klasse auch bei dem Slide-Trenner (denn auch dort kann ich diese Sichtbarkeit unten auswählen) greifen, käme man irgendwie mit eingangs beschriebenen Tricks zurecht.

[Tim]

Ja ok Tm. Das war mein Fehler.

Allerdings bleibt das eigentliche Problem, dass ich nicht individuell mal 2 Bilder, mal 1 Bild je Slide im gleichen Swiper-Slider setzen kann. Würde die Sichtbarkeits-CSS-Klasse auch bei dem Slide-Trenner (denn auch dort kann ich diese Sichtbarkeit unten auswählen) greifen, käme man irgendwie mit eingangs beschriebenen Tricks zurecht.

Wären nicht getrennte Slider einfacher? Quasi einen Slider je Endgerät.

[quintacom]

Wären nicht getrennte Slider einfacher? Quasi einen Slider je Endgerät.

Nein, darum geht es ja nicht. Mit den Breakpoints kann ja nun wunderbar eingestellt werden, ab wann dann 1 Bild je Slide im Slider angezeigt wird.
Im Slider kann man ja nur generell angeben, ob 1 Bild oder mehrere Bilder je Slide dargestellt werden. Ich brauche eine Möglichkeit, je Slide mal 1 Bild, dann beim nächsten Slide 2 Bilder nebeneinander und dann wieder 1 Bild darstellen zu können. Das Ganze eben in ein und demselben Swipe-Slider und nur für größere Bildschirme.

[Tim]

Ich brauche eine Möglichkeit, je Slide mal 1 Bild, dann beim nächsten Slide 2 Bilder nebeneinander und dann wieder 1 Bild darstellen zu können.

Klingt nach folgenden Aufbau

1. Slide: Kein Grid, nur Bild
2. Slide: 50|50 Grid, mit je einem Bild links / rechts
3. Slide: Kein Grid, nur Bild

[quintacom]

Tim, ja soweit in Ordnung. War mir dummerweise nicht bewusst, dass ich auch ein Grid oder was auch immer zwischen die Trenner packen kann. Wie peinlich.

Aber mit dieser Lösung wird dann beispielweise auf dem Smartphone natürlich das Grid komplett dargestellt, d.h. beide Bilder aus dem Grid wandern untereinander. Denn das Grid mit den beiden Bildern ist ja der Inhalt dieses Slides.
Wollte jedoch auf kleineren Displays nur ein Bild dann darstellen. Verstehst was ich meine?

[Tim]

Korrekt. Das Grid wird standardmäßig auf Smartphones auf 100% gesetzt. Das kannst du in den Einstellungen des Grid-Reihen Elements anpassen oder via CSS.

[quintacom]

Ja, das ist klar. Würde aber ja nichts daran ändern, dass auf mobilen Geräten dann trotzdem beide Bilder dieses Slides (mit 2 enthaltenen Bildern in dem Grid) dargestellt werden. Das sollte ja eben nicht. Eben nur auf Desktop-Bildschirmen. Daraum geht es doch die ganze Zeit.

[quintacom]

Da die Sichtbarkeits-CSS-Klasse sich also anscheinend nicht auf das Swiper-Slider-Trennelement auswirkt, muss ich eine andere Lösung für das Problem finden.
Über ein angepasstes Custom-Template für dieses Element mit Angabe einer eigenen no-mobile-Klasse, sollte das wohl machbar sein. Werde ich morgen mal ausprobieren und dann sieht man ja ...