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 ...
Ankündigung
Einklappen
Keine Ankündigung bisher.
Swiper-Slider und Sichtbarkeitsklassen
Einklappen
X
-
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.
Einen Kommentar schreiben:
-
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.
Einen Kommentar schreiben:
-
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?
Einen Kommentar schreiben:
-
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.
1. Slide: Kein Grid, nur Bild
2. Slide: 50|50 Grid, mit je einem Bild links / rechts
3. Slide: Kein Grid, nur Bild
Einen Kommentar schreiben:
-
Zitat von Tim Beitrag anzeigen
Wären nicht getrennte Slider einfacher? Quasi einen Slider je Endgerät.
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.
Einen Kommentar schreiben:
-
Zitat von quintacom Beitrag anzeigen
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.
Einen Kommentar schreiben:
-
Zitat von Tim Beitrag anzeigenDas 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.
Code:breakpoints: { 768: { slidesPerView: 1, spaceBetween: 0 }, 1024: { slidesPerView: 2, spaceBetween: 0 } }
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.
Einen Kommentar schreiben:
-
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.
Code:breakpoints: { 768: { slidesPerView: 1, spaceBetween: 0 }, 1024: { slidesPerView: 2, spaceBetween: 0 } }
Zuletzt geändert von Tim; 19.01.2023, 10:16.
Einen Kommentar schreiben:
-
Ok, wenn ich dort eintrage:
Code:breakpoints: { 1024: { slidesPerView: 1, spaceBetween: 0, }
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.
Einen Kommentar schreiben:
-
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
Einen Kommentar schreiben:
-
Swiper-Slider und Sichtbarkeitsklassen
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?Stichworte: -
Einen Kommentar schreiben: