• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

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

XirLion

Mitglied
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 :)
 

Charly1410

Neues Mitglied
Gefunden habe ich bisher "swiperjs - Thumbs gallery loop", doch hier besteht das Problem das mit JS die "slidesPerView: 4," fest definiert sind
Gerade ausprobiert und wenn ich einen anderen Wert für slidesPerView angebe, nimmt er das problemlos.
Aber vermutlich meinst Du, dass Du nicht weißt, wie Du zwischen Desktop- und Mobilansicht den Wert umschalten kannst? Auch das geht mit Javascript. Ich habe hier mit Hilfe einer Mediaquery der Wert abhängig von der Orientierung Hoch-/Querformat gesetzt:
Javascript:
        // Initialisieren von Swiper beim Neuladen der Seite erzwingen:
        let isPortrait = null;
        function initSwiper() {
            // Orientierung der Anzeige mit Mediaquery ermitteln:
            const isPortraitNew = matchMedia("(orientation: portrait)").matches;
            // Hat die Orientierung sich geändert?
            if (isPortraitNew != isPortrait) {
                isPortrait = isPortraitNew;
                // Wir legen die Anzahl der sichtbaren Thumbnails
                // auf Grund der Orientierung der Anzeige fest:
                let thumbsPerView;
                if (isPortrait) {
                    thumbsPerView = 3;
                } else {
                    thumbsPerView = 5;
                }
                // Swiper neu initialisieren:
                var swiper = new Swiper(".mySwiper", {
                    spaceBetween: 10,
                    slidesPerView: thumbsPerView,
                    freeMode: true,
                    watchSlidesProgress: true,
                });
                var swiper2 = new Swiper(".mySwiper2", {
                    spaceBetween: 10,
                    navigation: {
                        nextEl: ".swiper-button-next",
                        prevEl: ".swiper-button-prev",
                    },
                    thumbs: {
                        swiper: swiper,
                    },
                });
            }
        }
        // Swiper initialisieren:
        initSwiper();
        // Bei jeder Änderung der Größe des Anzeigebereichs
        // prüfen ob Swiper neu initialiert werden muss:
        window.addEventListener('resize', initSwiper);
 
Zuletzt bearbeitet:

XirLion

Mitglied
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!
 

Charly1410

Neues Mitglied
Wenn ich dein Code richtig lese, muss ich zusätzlich noch
Mediaquery (css) mit ".portrait" ansprechen, an dem sich dieser orientiert, um zu funktionieren?
Nein, das ist nicht erforderlich, das macht Javascript intern. Ich hätte noch dazu schreiben sollen, dass ich von der Demo von Swiper ausgegangen bin:
https://swiperjs.com/demos#thumbs-gallery
und nur das Javascript geändert habe.
Verflixt, während ich am Schreiben bin, fällt mir ein, dass Safari "orientation" nicht unterstützt. Benutzt Du Safari? Es gibt jedoch auch "aspect-ratio" und das wird auch von Safari unterstützt. Damit kann man das Seitenverhältnis als Zahlenwert abfragen.
Also diese Zeile:
Code:
const isPortraitNew = matchMedia("(orientation: portrait)").matches;
durch diese ersetzen:
Code:
const isPortraitNew = matchMedia("(aspect-ratio < 1)").matches;
 

XirLion

Mitglied
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!

FireShot Capture 243 - Ferienhaus Kleist - 127.0.0.1.png


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