[GELOEST] Gesucht: Draggable Thumbnail Image Slider mit dezidierten Vorgaben

[XirLion]

Guten Abend,

Ich bin für eine Ferienhaus-Website verzweifelt am Suchen nach einem modernen Galerie-Slider ( für 23+ Bilder), er soll folgende Punkte erfüllen:

• no plugins (kein CDN)
• only html/css/js
• draggable
• thumbnails

Gefunden habe ich bisher "swiperjs - Thumbs gallery loop", doch hier besteht das Problem das mit JS die "slidesPerView: 4," fest definiert sind, in der Desktopansicht benötigt ich jedoch mehr Thumbs als in der Mobilansicht aufgrund des gegebenen Platzes. Leider kenne ich mich mit JS nicht weiter aus, wie sich dies anders steuern lässt beim Wechsel zwischen den verschiedenen Ansichten.

Auch "Flickity" hatte ich bereits probiert, doch hier teilen sich der Obere- und Thumbnail-Slieder den gleichen Viewerport welchen ich nicht einzelnt von der Größe her angepasst bekomme...

Habt ihr vielleicht noch eine schönere oder modernere Lösung? Würde mich über Tipps freuen :)

 

[XirLion]

Vielen Dank für deine schnelle Antwort.

Wenn ich den slidePerView auf 8 setze, bleiben diese bisher auch noch bestehen, wenn ich das Browser-Fenster verkleinere.

Wenn ich dein Code richtig lese, muss ich zusätzlich noch
Mediaquery (css) mit ".portrait" ansprechen, an dem sich dieser orientiert, um zu funktionieren? Oder dem ThumbnailSlider im HTML diese classe geben? :) Vielen Dank schonmal!

 

[XirLion]

Hey danke fürs schnelle Zurückmelden. Ich benutze den Chrome als Browser. Habe die Zeile aber dennoch soeben getauscht.

Ich hab meinen anderen Fehler soeben gefunden, ich dachte das ich in der Zeile "slidesPerView: thumbsPerView," das Wort mit meiner gewünschten Zahl austauschen muss dies war jedoch nicht so gedacht :)

Habe es nochmal neu eingefügt und jetzt funktioniert es wie ich es mir vorgestellt habe, Super!




Ich danke dir vielmals für deine Hilfe! :)