Flexslider2 mit max. Imagebreite

  • Hallo Leute,

    hat sich schon mal jemand mit dem Flexslider2 beschäftigt? Ich versuche schon seit Tagen, dem Flexslider per CSS beizubringen, dass er mir die Bilder nicht immer über die ganze Bildschirmbreite darstellt, wodurch sie dann nach unten über den Bildschirmrand hinauswandern und den Seitenfuss dadurch nach unten aus dem sichtbaren Bereich drücken.


    Ich habs inzwischen soweit, dass der Fuss immer unten stehen bleibt, wodurch die Bilder aber in der Breite gestretched werden. Es sollen die Bilder aber maximal so breit dargestellt werden, wie sie wirklich sind, sodass das Seitenverhältnis sich nicht verändert. Darüber hinaus soll links und rechts ein gleich großer Rand bleiben.


    Ich habe unter http://www.lagander.de/flexSlider2Test/index.html den aktuellen Stand hingestellt, wobei alle meine Änderungen sich in der index.html befinden, der FlexSlider ist original. Vielleicht kann mal jemand drüberschauen und mir auf die Sprünge helfen. Wäre toll!

  • Auf http://lagander.de/flexSlider2Test/center.html seht ihr bereits ein Beispiel, wo das Image schön zentriert wird und der Fußblock nicht nach unten hinausgeschoben wird - soweit so gut!


    Einziges Problem dabei ist aber noch Folgendes: Wenn man das Browserfenster horizontal verkleinert sieht man nur mehr den linken Teil eines breiteren Images, es soll aber eine der beiden folgenden Varianten sein:

    • Entweder Image responsiv und entsprechend der Bildschirmbreite verkleinert
    • Oder links und rechts gleichmäßig abgeschnitten, sodaß man am Handy das horizontale Zentrum sieht und nicht den linken Rand

    LG

  • Mit Cycle2 tue ich mich etwas leichter, weil das das HTML nicht so stark umarbeitet. Hier eine Demo:

    Die Bilder werden mit object-fit eingepasst, das führt dazu dass seitlich oder oben und unten freier Raum entsteht. Oder man müsste in Kauf nehmen, dass etwas abgeschnitten wird.

  • Das schaut ja schon mal ganz gut aus, aber ich hätte noch die eine oder andere Frage dazu:

    • Wie kann man unter die Images oder in die Images hinein solche Seitenpunkte machen, die man zum man. Blättern verwendet?
    • Ab welcher jQuery Version funktioniert das?
    • Was bewirkt data-cycle-slides="> div">?
  • Generell erfordert Cycle2 etwas mehr Handarbeit, wenn man erweiterte Features haben will. Das ist nicht nur ein Nachteil sondern auch ein Vorteil weil man alles genau so einrichten kann wie man es sich vorstellt.


    Die Seitenpunkte werden hier beschrieben unter "Timeout and pager":

    http://jquery.malsup.com/cycle/int2.html


    Zitat
    • Was bewirkt data-cycle-slides="> div">?

    Das sagt dem Plugin, dass die Elemente keine Bilder sondern Divs sind.


    Zitat
    • Ab welcher jQuery Version funktioniert das?

    Die FAQs sagen dazu: "Cycle2 requires jQuery 1.7 or later."

  • Hey,


    hätte jetzt einfach in der flexslider.css in Zeile 51 folgendes abgeändert:


    Code
    .flexslider .slides img {
        max-width: 100%;
        display: block;
    }

    statt width max-width benutzen


    und um das ganze dann zu zentrieren muss in Zeile 92 folgendes rein:

    Code
    .flexslider .slides img {
        height: auto;
        -moz-user-select: none;
        margin-left: auto;
        margin-right: auto;
    }
  • domeetr: Ich habe in die index.html folgendes nach dem Include von flexslider.css eingebaut:

    Code
    .flexslider .slides img {
        max-width: 100% !Important;
        display block !Important;
    }
    .flexslider .slides img {
        height: auto !Important;
        -moz-user-select: none !Important;
        margin-left: auto !Important;
        margin-right: auto !Important;
    }

    Sollte das nicht auch reichen und die Einstellungen in flexslider.css überschreiben?

    Bewirkt aber nicht den gewünschten Effekt, bei breiten Bildschirmen wird der Fußblock nach unten weggedrückt.

    Wenn ich hingegen folgendes einfüge:

    Code
    .flexslider { display: flex; justify-content: center; align-items: center; }
    .flexslider .slides, .flexslider .slides img { max-height: calc(100vh - 230px); }

    bleibt der Fussblock schön stehen, aber das Foto wird in der Breite gestretcht.


    Ich beschäftige mich ausserdem grad mit dem Cycle Slider, das schaut ganz gut aus und sollte damit funktionieren!

  • Einen Denk-Fehler hast du in deinem Vorgehen. Ein Max-Width !important ersetzt nicht ein width:100% ...


    Das musst du natürlich in der flexslider.css in Zeile 51 auskommentieren, dann sollte es einwandfrei funktionieren! :)

  • Das liegt daran, dass die Höhe des Pagers auf 100% gesetzt ist. Weil er unten positioniert ist, ragt er nach unten heraus. Einfach die Zuweisung der Höhe weg lassen und besser auf bottom positionieren:

  • Hallo domeetr:

    Damit die flexslider.css unverändert bleibt, habe ich in der index.html den Style

    .flexslider .slides img { width: auto; }

    gesetzt, damit funktioniert es jetzt auch!

    Danke!

  • Hallo Sempervivum:

    Das funktioniert leider nicht, denn wenn ich im CSS für den Slider

    Code
    .cycle-main { flex: 1; min-height: 0; margin: 5px 5%; margin-top: 105px; }
    
    div.cycle-slideshow, div.cycle-slideshow div { width: 100%; height: 100%; }
    div.cycle-slideshow img { width: 100%; height: 100%; object-fit: contain; }
    div.cycle-slideshow div.slide { width: 100%; height: 100%; }
    
    .cycle-pager { text-align: center; width: 100%; z-index: 500; position: absolute; top: calc(100% - 100px); overflow: hidden; }
    .cycle-pager span { font-family: arial; font-size: 50px; width: 30px; height: 30px; display: inline-block; color: #BF926B; cursor: pointer; }
    .cycle-pager span.cycle-pager-active { color: #193e63;}
    .cycle-pager > * { cursor: pointer;}

    das height: 100% weglasse

    Code
    div.cycle-slideshow, div.cycle-slideshow div { width: 100%; }

    rutscht das Bild bei breiten Monitoren nach unten über den Fußblock aus dem sichtbaren Bereich heraus. Dabei hilft es auch nicht, dem Pager bottom statt top zu geben.

  • Du hast Recht, den Fall, dass das Browserfenster in der Höhe klein ist aber breit, hatte ich nicht berücksichtigt. Dann fehlt wiederum das height: 100%; beim Container der Slideshow. Lässt sich aber leicht beheben, indem man die Höhe wiederum gezielt bei diesem setzt:

    Code
    div.cycle-slideshow {
        height: 100%;
    }

    Generell stiftet es ein wenig Verwirrung, dass der Container für den Pager ebenso wie der für die Slides jeweils ein div ist. Um sie besser auseinander halten zu können, könnte man für die Slides ein figure-Tag nehmen.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!