Flexslider2 mit max. Imagebreite

lagraf · 18. Januar 2021

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!

lagraf · 18. Januar 2021

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

lagraf · 18. Januar 2021

Auf http://lagander.de/flexSlider2Test/responsive.html habe ich die responsive Variante. Dabei wird das Image aber unten abgeschnitten, sobald die Browserbreite größer wird als das Image. Es soll aber auf größeren Bildschirmen immer das gesamte Image sichtbar sein, zentriert und Rand links und rechts!

Sempervivum · 18. Januar 2021

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

HTML

<!DOCTYPE html>
<html lang="de">

<head>
    <title>Cycle 2 responsive</title>
    <meta http-equiv="content-type" content="text/html; charset=windows-1252">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/2.1.6/jquery.cycle2.min.js"></script>
    <style>
        html,
        body {
            height: 100%;
            margin: 0;
        }

        body {
            display: flex;
            flex-direction: column;
        }

        main {
            flex: 1;
            min-height: 0;
            margin: 0 5%;
        }
        div.cycle-slideshow,
        div.cycle-slideshow div {
            width: 100%;
            height: 100%;
        }

        div.cycle-slideshow img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
    </style>
</head>

<body>
</body>
<header>Dies ist der Header</header>
<main>
    <div class="cycle-slideshow" data-cycle-fx="scrollHorz" data-cycle-timeout="2000" data-cycle-slides="> div">
        <div style="background:#fcc">
            <img src="images/dia0.jpg">
        </div>
        <div style="background:#cfc">
            <img src="images/01.png">
        </div>
        <div style="background:#ccf">
            <img src="images/AAA.png">
        </div>
    </div>
</main>
<footer>Dies ist der Footer</footer>

</html>

Alles anzeigen

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.

lagraf · 19. Januar 2021

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">?

Sempervivum · 19. Januar 2021

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."

Sempervivum · 19. Januar 2021

PS: Wie ich sehe, eignet sich diese Demo besser, um einen Pager einzubauen:

http://jquery.malsup.com/cycle2/demo/pager.php

domeetr · 20. Januar 2021

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;
}

lagraf · 21. Januar 2021

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!

domeetr · 21. Januar 2021

Zitat von lagraf
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!
Alles anzeigen

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!

lagraf · 21. Januar 2021

Hallo Sempervivum,

die Pager Punkte habe ich eingebaut und damit erfüllt der Slider die Anforderungen des Users, danke für deine Hilfe!

LG

lagraf · 22. Januar 2021

Hallo Sempervivum,

eine Unschönheit habe ich noch beim Cycle2 Slider auf meiner Startseite

http://www.rachbauer.org/guggis/index.html

Wieso kann man über den Fusstext in einen freien Raum hinunterscrollen und wie kann man das beheben?

Sempervivum · 22. Januar 2021

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:

Code

div.cycle-slideshow, div.cycle-slideshow div {
    width: 100%;
    /* height: 100%; */
}
.cycle-pager {
    text-align: center;
    width: 100%;
    z-index: 500;
    position: absolute;
    /* top: calc(100% - 100px); */
    overflow: hidden;
    bottom: 0;
}

Alles anzeigen

lagraf · 22. Januar 2021

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!

lagraf · 22. Januar 2021

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.

Sempervivum · 23. Januar 2021

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.

lagraf · 24. Januar 2021

Hallo Sempervivum,

damit funktioniert es jetzt, vielen Dank für deine Hilfe!

LG

Flexslider2 mit max. Imagebreite

Jetzt mitmachen!

Teilen

Tags