Embla-Slider

[stobi_de]

Mobi setzt teilweise den EMbla-Slider ein, um einen Slider innerhalb eines Blocks zu bauen.
Sehen wir hier oben unter dem Titelbild
https://www.afripix.de/casapone/index.php

Nun habe ich die Probleme
1. es gibt ein Fade über ein zusätzliches Javascript, was man aus dem Netz laden kann, was aber keine Auswirkung hat.
2. Die Bildproportionen im Slider sind fest. Bei einer Verkleinerung des Browsers wird der ganz Slider auch verkleinert.
Ich finde keine Möglichkeit, ein COVER einzutragen, damit der Slider die Blockhöhe beibehalt

Habe den Slider auf Stillstand gesetzt, damit man vernünftig suchen kann

[Tommy Herrmann]

Moin,

habe jetzt das Problem noch nicht richtig verstanden. Dieser Slider verkleinert sich doch goldrichtig am Handy:

Im Übrigen steht der Slider doch auf "cover":

Code: Alles auswählen

.cid-uLqWYPC4p9 .embla__slide .slide-content .item-wrapper .item-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0 !important;
}

Aus welchem Thema und welchen Block stammt dieser Slider?

[stobi_de]

Schieb mal den Browser zusammen.
Der Block stammt aus StockM5

[Tommy Herrmann]

.. ja, die Bilder passen sich an - wie erwartet:

[Tommy Herrmann]

... warte - sehe jetzt, was Du meinst

[Tommy Herrmann]

... da wird das Bild unter 992px auf eine Höhe von 350px angegeben. Durch das "cover" wird nur ein Teil der Höhe angezeigt (logisch), weil es ja dennoch den gesamten Platz in der Breite verwendet. Man könnte hier vielleicht eine zusätzliche Breite eintragen (z.B. 50%), damit wieder das gesamte Bild, also vollständig, dargestellt wird.

Code: Alles auswählen

@media (max-width: 992px) {
  .cid-uLqWYPC4p9 .embla__slide .slide-content .item-wrapper .item-img img {
    height: 350px;
    width: 50%;
}

[Tommy Herrmann]

... oder versuche mal das in den Media-Abfragen z.B. in "contain" zu ändern:

Code: Alles auswählen

@media (max-width: 992px) {
  .cid-uLqWYPC4p9 .embla__slide .slide-content .item-wrapper .item-img img {
    height: 350px;
    object-fit: contain;
  }

[stobi_de]

Nee, beides klappt nicht.
Wenn ich ein Hochformat-Bild nutze, wird das besser angezeigt.
Aber das ist nicht sinn der Sache

[Tommy Herrmann]

Ich habe jetzt diesen Slider aus dem Thema "StockM5" hier als Test (im Standard-Thema "Mobirise5") eingebunden.

Da geht das von ganz alleine richtig

gelöscht/Vorlageseite/Tutorial.html

Testseite wird später wieder gelöscht.

[Tommy Herrmann]

Nee, beides klappt nicht.

… musst eben mal weg und habe gerade nochmals geguckt.

Natürlich verhält sich der Slider im Thema "StockM5" komplett anders als im Standard-Thema "Mobirise5"

… so viel zu Kompatibilität unter den Themen

Hier habe ich das Thema "StockM5" übrigens als Beispielseite, mit diesem Slider im Header-Block, auch im Netz:

https://www.mobirise-tutorials.com/StockM5/


Hier ein zweiter Test und das geht ganz genau so, wie ich oben beschrieben habe:

gelöscht/Testseiten/Test-StockM5-Slider/

Seite wird später wieder gelöscht.


Screenshot am Display <= 992px - Original (vorher)

Screenshot am Display <= 992px - Nach Änderung (nachher)

... mit:

object-fit: contain;

Code: Alles auswählen

.embla__slide {
  display: flex;
  justify-content: center;
  min-width: 100%;
  max-width: 100%;
  @media (max-width: 767px) {
    min-width: 100%;
    max-width: 100%;
  }
  .slide-content {
    width: 100%;
    .item-wrapper {
      .item-img {
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          border-radius: 0 !important;
          @media (max-width: 992px) {
            height: 350px;
            object-fit: contain;
          }
        }
      }
    }
  }
}

[stobi_de]

Nein, auch nicht.
Mein ganzes Projekt ist auch StockM5.
Der Originalslider hat nur Hochformatbilder.
Dann passt das sowieso.
Der Slider hat ein min-width=100%.und max-width:100%
Dadurch werden die Bilder halt nicht entsprechend abgeschnitten.
Aber ein Ersatz von width:100% durch height:100% klappt nicht.

Moment, ich popel mal was an den Bildern rum

...
Jetzt siehst Du, was ich meine.
Wenn im Textfeld wenig Text steht, wird die Reihe nicht so hoch und das mit dem Bild fällt nicht auf (wie in Deinem Beispiel. Der Mann am Schreibtisch wird nun aber sehr blöd abgeschnitten, wesshalb ich ein quadratisches Bild drin hatte - dann klappt es nicht mehr.
Mit Pixelcut also den Mann am Schreibtisch nach unten verlängern....

Und mit dem Fade habe ich immer noch keine Ahnung.

[Tommy Herrmann]

wieso "passt das sowieso" ???

Ich habe doch gerade extra diese Seite erstellt und schon an den Screenshots (vorher / nachher) sieht man doch ganz klar, dass es nicht passt - auch nicht mit den Originalbildern.

Auf jeden Fall kann man mit "contain" das gesamte Bild anzeigen, wie man an meinem Beispiel erkennt.

[Tommy Herrmann]

... ich setze mal noch Deine beiden Bilder da ein.

... gucke dann auch mal nach dem "fade"

[Tommy Herrmann]

Habe jetzt Deine beiden Bilder drinnen und das geht ganz genauso. Das Textfeld könnte man natürlich auch noch etwas geschickter setzen oder leicht transparent gestalten.

[stobi_de]

Ich mag es eigentlich, dass der Slider auf dem Handy über die volle Breite geht.
Mich störte es halt, dass das Bild nicht so hoch ist wie die ROW, wenn der Browser ETWAS schmaler wird (auf dem tablet meiner Frau). Das Bild muss da aufhören, wo der schwarze Button aufhört. Also so auf Anhieb finde ich da jetzt nur die Lösung mit sehr hohen Bildern.
Und wenn echte Bilder vom Kunden kommen, sind die garantiert im Querformat.

Ist ja mal wieder ein Angebots-Design.

[Tommy Herrmann]

Um anstelle des "slide" ein "fade" zu verwenden, müsste man die JavaScript-Datei von "Embla" ändern:

Code: Alles auswählen

<script src="assets/embla/embla.min.js"></script>

Ich habe mich mit dieser Anwendung bisher nie beschäftigt, wahrscheinlich könnte man auch ein zusätzliche JavaScript einsetzen, das auf "fade" umstellt.

[Tommy Herrmann]

... man kann da ein wenig probieren. Jetzt habe ich mal bei `max-width: 992px` das `min-height` auf 600px (anstatt 350px per Default) gesetzt und anstatt von "contain" bei `max-width: 992px` habe ich `width` und `height` auf 100% gesetzt:

Code: Alles auswählen

.slider-wrap {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  position: relative;
  overflow: hidden;
  height: 100%;
  padding: 10px;
  min-height: 650px;
  @media (max-width: 992px) {
    min-height: 600px;
  }
  .desc-wrap {
    width: 45%;
    right: 10px;
    bottom: 10px;
    background-color: @desc;
    padding: 16px 20px;
    z-index: 1;
    @media (max-width: 992px) {
      width: 80%;
    }
    .mbr-desc {
      margin-bottom: 0;
    }
  }
}
.embla__slide {
  display: flex;
  justify-content: center;
  min-width: 100%;
  max-width: 100%;
  @media (max-width: 767px) {
    min-width: 100%;
    max-width: 100%;
  }
  .slide-content {
    width: 100%;
    .item-wrapper {
      .item-img {
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          border-radius: 0 !important;
          @media (max-width: 992px) {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
}

Das ist ja alles eigentlich nur eine andere Art des Designs, das eben Mobirise wohl beim Breakpoint von 992px anders haben wollte, damit die Bilder vom Slider nicht zu mächtig dargestellt werden.

Das Format der Bilder spielt dabei doch gar keine Rolle; wichtig ist lediglich, dass die Höhe entsprechend angepasst wird, um den Bildschirm optimal für jede Mediagröße zu nutzen. So wird vermieden, dass die Bilder durch CSS "cover" unschön beschnitten werden.


Höhenverhältnis 992px : 600px

Wenn mit "cover" gearbeitet wird, werden die Bilder ja immer so dargestellt, dass diese den angegebenen Raum auch füllen, daher sollte man dann unbedingt auf die Seitenverhältnisse achten und entsprechend die Höhe der vorhandenen Displaybreite anpassen.


... zur Not im Dreisatz ausrechnen:

Höhenverhältnis Originalfoto 1607px : 2406px Breite jetzt = 1607 Höhe jetzt = 2406 Breakpoint = 992 Höhe bei 992 = 1485 2406 * 992 x = __________ = 1485 1607

Code: Alles auswählen

@media (max-width: 992px) {
  min-height: 1485px;
}

Höhenverhältnis 992px : 1485px

[stobi_de]

Auch wenn das Projekt zwischenzeitlich verstorben ist auf Grund meiner unverschämten Forderungen einer Unterschrift zur Urheberrechtsvereinbarung (an Allem, was ich an Daten von ihm bekomme, hat er auch die Rechte):

Haben wir das Grundproblem eines fadenden Emblas eigentlich irgendwo gelöst?

[Tommy Herrmann]

Nein, nicht wirklich – ich habe überall gesucht. Was ich gefunden habe, konnte ich jedoch nicht umsetzen, und ich habe es auch gar nicht erst ernsthaft versucht:

https://www.embla-carousel.com/plugins/fade/

Ich denke, es gibt genügend Alternativen mit einem "Fade"-Effekt. Jeder Bootstrap-Slider hat die Option "Fade".

Mit Mobirise und/oder den vorhandenen JavaScripts geht es jedenfalls (meiner Meinung nach) nicht. Ich hatte den Verweis zu dieser JavaScript-Datei von "Embla" noch zusätzlich eingetragen, das ging aber so noch nicht:

Code: Alles auswählen

<script src="https://unpkg.com/embla-carousel-fade/embla-carousel-fade.umd.js"></script>