Slider mit Fade?

[stobi_de]

Ich habe auf meiner aktuellen Problemseite eine Landingpage gebaut mit einem Slider
www.hno-bilal.de/hno-bielefeld.php
Es ist nun völlig unwichtig, aber ich hätte oben gerne einen Fade-Effekt, nicht das Rumgeschiebe.
Es geht nicht mit dem Bootstrap-Befehlt "carousel-fade"

[Tommy Herrmann]

Moin,

ja - das ist die Class dafür:

https://getbootstrap.com/docs/5.1/compo ... #crossfade

Ich hatte hier mal einen eigenen Slider mit Fade-Effekt erstellt:

https://www.mobirise-tutorials.com/Test ... html#Fader

Hier, bei diesem Mobirise-Block, hatte ich das auch nur in diese Fader-Class geändert:

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

Welcher Block aus welchem Thema ist das denn, dann könnte ich auch mal hier gucken.

[stobi_de]

Das ist der EMBLA Slider,
"_name": "header01",
"_sourceTheme": "stockm5",

[Tommy Herrmann]

Ja - hab den gefunden. Diese Bootstrap-Class ist bei dem Slider nicht anwendbar, denn der wird ja komplett über JavaScript gesteuert:

https://www.hno-bilal.de/assets/embla/script.js

Da müsstest Du Dir einen CSS-Slider raussuchen.

[Tommy Herrmann]

… also dann ungefähr so:

https://www.mobirise-tutorials.com/Tuto ... Bootstrap5

(Beispielseite hat sich geändert)

Maus nicht über dem Slider positionieren, denn dadurch stoppt dieser!

Kopiere den Code für "Mobirise5 /M5" Themen hier und verwende am einfachsten einen Block aus der Gruppe "Article" oder welchen Block auch immer. Ersetze die URLs mit Deinen Bildern und fertig.

Die Intervallzeit kannst Du ja anders einstellen bei:

data-bs-interval="3000"

Code: Alles auswählen

<!-- Beginn eigener Bootstrap Fader -->
<div id="carouselExampleInterval" class="carousel slide carousel-fade" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active" data-bs-interval="3000">
      <img src="http://www.mobirise-tutorials.com/Testseiten/Testseite3/assets/images/Bild1.jpg" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item" data-bs-interval="3000">
      <img src="http://www.mobirise-tutorials.com/Testseiten/Testseite3/assets/images/Bild2.jpg" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item" data-bs-interval="3000">
      <img src="http://www.mobirise-tutorials.com/Testseiten/Testseite3/assets/images/Bild3.jpg" class="d-block w-100" alt="...">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>
<!-- Ende eigener Bootstrap Fader -->

[stobi_de]

Hallo Tommy, habe das händisch auch schon diverse Male gemacht.
Da dieser Embla-Slider aber recht oft in den Mobi-Blöcken zu finden ist, will ich erstmal schaun, ob man den nicht irgendwie parametriert bekommt.
https://github.com/davidjerleke/embla-c ... /issues/39

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

[Tommy Herrmann]

Na ja, vielleicht findest du ja die Lösung - oder hast sie schon gefunden.

Mir wäre das jetzt viel zu aufwendig, zumal eine Bootstrap-Lösung ausgesprochen einfach ist und das Ergebnis keineswegs schlechter ausfällt.

[stobi_de]

Heute wäre es einfacher, aber wenn ich das noch oft benutze, wird dann die Mobi-Lösung einfacher.
Momentan scheint es mir einfacher, dass ich mich nicht am Schiebeteil störe
Habe gerade stress

[stobi_de]

Hatten wir hier nicht mal was zum ENTLADEN eines Java-Scripts?
So wir in der Doku, einfach dieses Teil laden und es fadet automatisch, geht nicht.
<script src="https://unpkg.com/embla-carousel-fade/e ... "></script>

Oder hatte das Rudy herausgefunden im anderen Forum?

[Tommy Herrmann]

Mit JavaScript in dem Umfang kann ich nicht helfen. Da müsste ich mich erst stundenlang mit beschäftigen.

Vielleicht Rudy ...

[stobi_de]

Nee, Du sollst nicht meinen Job machen!!!!!!!!!!!!!!!!!!!!
Ich dachte, Du hättest schon eine Lösung in Deinem gigantischen Archiv - auch Kopf genannt

[Tommy Herrmann]

Moin,

ich kenne diesen Slider gar nicht, jedenfalls ist mir nie bewusst gewesen, dass das von "embla-carousel.com" ist.

Dieses Problem hatte mich wohl noch nicht erwischt und ist mir gerade erst durch Dich bewusst geworden.

Die haben ja so eine Sandbox da als Beispiel, ich verstehe die aber nicht so ganz und weiß nicht genau welche Dateien man da alle benötigt. Wo werden denn die 3 CSS-Dateien geladen

https://codesandbox.io/p/sandbox/ddhlyh ... %3A95%2C30

Auch der Download von Github ist mir so zu kompliziert. Ich finde da nicht mal Beispielseiten:

https://github.com/davidjerleke/embla-carousel


Habe das mal hier ausprobiert - geht aber nicht. Wahrscheinlich muss man die JS-Dateien noch anders einbinden und es fehlen wohl auch noch welche ...

https://www.mobirise-tutorials.com/Test ... -fade.html

(Testseite wird später wieder gelöscht)