Mobirise Tutorials

Fade Effekt

Beispiel für einen Fade Effekt im Bootstrap 5 Slider

Eigener Bootstrap Slider als Fader

Für weitere Beispiele von diesem Fader guckt auch auf meiner Testseite, da es in Mobirise 4 auch andere Parameter gibt.

Fader in Mobirise 4 

Kein Stopp bei Mausüber: data-bs-pause="false"
Geschwindigkeit: data-bs-interval="6000"
Überblendung: transition-duration: 3.0s;

Slider mit Fade Effekt

Ein Beispiel in Mobirise nach dieser Bootstrap 5 Slider: getbootstrap.com

Natürlich passt sich die Größe dieses Sliders flexibel an jeden Block von Mobirise an oder er kann auch, zum Beispiel als Header,  in voller Breite  verwendet werden. Selbstverständlich könnt ihr den Code nach Belieben anpassen und beispielsweise den Text, die Navigation oder deren Buttons entfernen.

Unten auch noch ein weiteres Beispiel von einem unverändertem Block aus dem Thema PreeschoolM5 

Hier ist der HTML-Code, den ich in einen Mobirise5-Block aus der Kategorie "Image & Video" eingefügt habe. Dieser Block verfügt über zwei Spalten: links befindet sich der Text und rechts das Bild.

<!-- Beginn eigener Bootstrap Fader -->
<div id="carouselExampleInterval" class="carousel slide carousel-fade" data-bs-pause="false" data-bs-ride="carousel">
 <div class="carousel-indicators">
  <button type="button" data-bs-target="#carouselExampleInterval" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
  <button type="button" data-bs-target="#carouselExampleInterval" data-bs-slide-to="1" aria-label="Slide 2"></button>
  <button type="button" data-bs-target="#carouselExampleInterval" data-bs-slide-to="2" aria-label="Slide 3"></button>
  <button type="button" data-bs-target="#carouselExampleInterval" data-bs-slide-to="3" aria-label="Slide 4"></button>
 </div>
 <div class="carousel-inner">
  <div class="carousel-item active" data-bs-interval="6000">
   <img src="https://www.mobirise-tutorials.com/Tutorials-3/images/image-block/Bild01.jpg" class="d-block w-100" alt="Bei Sonnenaufgang">
   <div class="carousel-caption d-none d-md-block">
    <h5>Bei Sonnenaufgang</h5>
    <p>Hier kann man auch Text hinzufügen</p>
   </div>
  </div>
  <div class="carousel-item" data-bs-interval="6000">
   <img src="https://www.mobirise-tutorials.com/Tutorials-3/images/image-block/Bild02.jpg" class="d-block w-100" alt="Am Strand">
   <div class="carousel-caption d-none d-md-block">
    <h5>Am Strand</h5>
   </div>
  </div>
  <div class="carousel-item" data-bs-interval="6000">
   <img src="https://www.mobirise-tutorials.com/Tutorials-3/images/image-block/Bild03.jpg" class="d-block w-100" alt="Unter Palmen">
   <div class="carousel-caption d-none d-md-block">
    <h5>Unter Palmen</h5>
   </div>
  </div>
  <div class="carousel-item" data-bs-interval="6000">
   <img src="https://www.mobirise-tutorials.com/Tutorials-3/images/image-block/Bild04.jpg" class="d-block w-100" alt="Bei Sonnenuntergang">
   <div class="carousel-caption d-none d-md-block">
    <h5>Bei Sonnenuntergang</h5>
   </div>
  </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 -->


Weiterhin habe ich noch diese CSS in den Bereich "CSS Editor" vom "Code Editor" des Blocks kopiert, womit die Überblendungszeit auf 3 Sekunden eingestellt wird.

.carousel-fade .carousel-item {
 transition-duration: 3.0s;
}

Code Editor

Fader HTML im Code Editor

Fader in voller Breite

Block aus Thema "PreschoolM5" der als Slider oder Fader eingesetzt werden kann.
Hier mit `object-fit: cover` am Smartphone um das Display zu füllen.
Fehler im Januar 2025 - Die Anzahl der Bilder kann nicht reduziert werden,
wodurch der Slider auf einem leeren Bildschirm hängen bleibt.

© Copyright Mobirise-Tutorials.com

Datenschutz und Impressum

Google Translator
Funktionale Cookies akzeptieren