Ankündigung

Einklappen
Keine Ankündigung bisher.

Galerie als Swiper-Slider: Verhalten bei unterschiedlich großen Bildern

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Galerie als Swiper-Slider: Verhalten bei unterschiedlich großen Bildern

    Hallo Leute,

    ich benutze den Swiper-Slider für eine Galerie.
    Leider sind hierfür nur unterschiedlich große Bilder vorhanden. Noch dazu im Quer- und Hochformat gemischt.
    Das sieht natürlich erst mal unschön aus.

    Als Lösungsansatz habe ich versucht, dem "swiper-container", mit einer eigenen Klasse, eine "max-height" zu verpassen.

    Bei Aufruf der Seite sieht das auch gut aus.


    So soll es sein (Ansicht im FF):
    Klicke auf die Grafik für eine vergrößerte Ansicht

Name: pct_swiper_slider_firefox_fe_korrekt.jpg
Ansichten: 1
Größe: 40,8 KB
ID: 2443

    Wenn jedoch der Slider benutzt wird, die Bilder damit in der Lightbox angezeigt werden und DANN die Lightbox geschlossen wird, entstehen sehr unschöne Anzeigen, die "Punkte" werden teilweise nach links verschoben und die Höhe der Bilder und des Sliders verändert sich immer unterschiedlich.
    Getestet und nachvollziehbar in FF und Chrome.

    So sieht es nach der Benutzung der Galerie mit der Lightbox aus im FF:
    Klicke auf die Grafik für eine vergrößerte Ansicht

Name: pct_swiper_slider_firefox_fe_fehler.jpg
Ansichten: 1
Größe: 18,1 KB
ID: 2444

    So sieht es nach der Benutzung der Galerie mit der Lightbox aus im Chrome:
    Klicke auf die Grafik für eine vergrößerte Ansicht

Name: pct_swiper_slider_chrome_fe_fehler.jpg
Ansichten: 1
Größe: 25,4 KB
ID: 2445

    Folgendes CSS habe ich hinzugefügt:
    Code:
    /*** Eigene Klasse edm-unterkunftobjekt im Swiper Slider vergeben  ***/
    #main div.edm-unterkunftobjekt .swiper-container{
        max-height: 160px;
    }
    Hat da jemand einen Tipp für mich?

    Gruß
    tschero
    Zuletzt geändert von tschero; 29.06.2020, 10:30.
    https://www.webdesign24.biz
    https://www.mein-panorama.de

  • #2
    Ergänzung:
    Die komplette Hauptspalte wird hier - nur ab und zu, nicht ständig reproduzierbar, nach links verschoben.

    So soll es sein:
    Klicke auf die Grafik für eine vergrößerte Ansicht

Name: pct_swiper_slider_firefox_fe_komplett_korrekt.jpg
Ansichten: 1
Größe: 87,9 KB
ID: 2446

    So wird es (nur manchmal):
    Klicke auf die Grafik für eine vergrößerte Ansicht

Name: pct_swiper_slider_firefox_fe_komplett_fehler.jpg
Ansichten: 1
Größe: 47,5 KB
ID: 2447

    Gruß
    tschero
    https://www.webdesign24.biz
    https://www.mein-panorama.de

    Kommentar


    • #3
      Des Problems Lösung wäre gleich große Bilder mit z.B. 1200 x 800 px .
      Leider liegen die nicht vor.
      Also muss ich hier irgend eine andere Lösung finden.
      https://www.webdesign24.biz
      https://www.mein-panorama.de

      Kommentar


      • #4
        Zitat von tschero Beitrag anzeigen
        Des Problems Lösung wäre gleich große Bilder mit z.B. 1200 x 800 px .
        Leider liegen die nicht vor.
        Also muss ich hier irgend eine andere Lösung finden.
        Sind das nicht getrennte Elemente. Überschrift und Galerie?
        ---
        In Galerien beschneidet Contao die Bilder nicht, oder? Da wird der Beschnitt auf die Thumbnails angewendet.

        Vielleicht mit CSS ein overflow:hidden hier setzen
        http://www.premium-contao-themes.com

        Kommentar


        • #5
          Zitat von Tim Beitrag anzeigen

          Sind das nicht getrennte Elemente. Überschrift und Galerie?
          Ja, das finde ich ja auch eben so komisch, dass das halbe Layout von der Änderung betroffen ist.

          https://www.webdesign24.biz
          https://www.mein-panorama.de

          Kommentar


          • #6
            Zitat von Tim Beitrag anzeigen
            In Galerien beschneidet Contao die Bilder nicht, oder? Da wird der Beschnitt auf die Thumbnails angewendet.

            Vielleicht mit CSS ein overflow:hidden hier setzen
            Scheinbar wird bei den Thumbnails nur proportional verkleinert. Beschnitten wird nichts.

            So sieht es aus ohne irgendwelche CSS Anpassungen von mir:
            Klicke auf die Grafik für eine vergrößerte Ansicht

Name: pct_swiper_slider_chrome_fe_ohne_anpassungen.jpg
Ansichten: 1
Größe: 94,8 KB
ID: 2448
            https://www.webdesign24.biz
            https://www.mein-panorama.de

            Kommentar

            Lädt...
            X