Swiper - Elementanzahl responsiv

[liebling65]

Hallo,

ich setze bei einer Website den Swiper Slider ein - 6 Objekte sind es insgesamt, 3 werden jeweils angezeigt. Bei der mobilen Ansicht werden natürlich auch 3 Objekte angezeigt (skaliert eben) - kann ich das irgendwie ändern, dass ab einem bestimmten Viewport nur 2 Objekte angezeigt werden?
Vielleicht sitze ich auch auf der Leitung....

Gruss
Erich

[Tim]

Hi Erich,
der Swiper hat eine sogn. breakpoint Option. Standard ist ein Break bei 768px (mobil) auf 1 Element. Siehe Screenshot im Anhang aus dem Tempalte customelement_swiperslider.

Der Swiper erlaubt n-viel Breiten-Einstellungen: https://swiperjs.com/swiper-api#param-breakpoints

[liebling65]

Wow, dass war aber flott. Was ich aber noch nicht checke: ich habe einen Breakpoint von 768 und 1 SlidePerView - Darstellung bei mir:
"normale" Browsergröße - 3 Slides
iPhone 12 Querformat (812x375px) - 3 Slides
iPhone 12 Hochformat (375x812px) - 1 Slide
Hä? Müsste dann nicht bei normaler Browsergröße und iPhone quer 1 Slide zu sehen sein und beim Hochformat dann 3 Slides? Oder bin ich da irgendwie falsch?

[Tim]

812 ist größer als 768 => 3 Slides
375 ist kleiner als 768 => 1 Slide

[liebling65]

Aber in der Doku steht:

breakpoints: { // when window width is >= 320px 320: { slidesPerView: 2, spaceBetween: 20 }, // when window width is >= 480px 480: { slidesPerView: 3, spaceBetween: 30 }, // when window width is >= 640px 640: { slidesPerView: 4, spaceBetween: 40 }
im Quelltext von Eclipse steht:
768: {
slidesPerView: 1,
spaceBetween: 0,
}
Wenn also 812 größer als 768 ist sollte nur 1 Slide angezeigt werden, oder? Und alles unter 768 die Voreinstellung im Modul (hier 3)

[Tim]

Probieren geht über studieren
Der Bruch erfolgt bei kleiner als: https://dev.premium-contao-themes.co...er-slider.html

Ich denke die Beschreibung der API ist falsch bzw. irreführend. Bei mehreren Breakpoints greift vielleicht eine "dazwischen" Regelung.

[liebling65]

Nach vielen Versuchen: probieren hilft nichts.
Wenn ich einen weiteren Breakpoint hinzufüge springen alle Ansichten auf slidesPerView: 1 zurück - warum auch immer. Irgendwo ist da ein Fehler....
Meine Grundeinstellung: 3 Slides
Breakpoint wie default:
768: {
slidesPerView: 1,
spaceBetween: 0,
}
Das funktioniert alles, aber einen weiteren Breakpoint mag er einfach nicht.

[Tim]

Meines Erachtens funktioniert es korrekt. Ich habe den Slider oben in unserem Dev um einen weiteren Breakpoint ab kleiner 1000px gesetzt. Es sollen ab dann 2 Slides angezeigt werden. Das funktioniert wie erwartet.

[liebling65]

Ich nehme alles zurück, schäme mich und versinke mal kurz im Erdboden.
Ich habe nach der geschweiften Klammer das Komma vergessen - OMG