Beispiel für einen Fade Effekt im Bootstrap 5 Slider
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;
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;
}
Fader HTML im Code Editor