Ich habe diesen Code in einen einfachen Textblock der Kategorie "Article" eingefügt
Hier habe ich mit diesen Bootstrap-Klassen:
<div class="carousel-caption d-none d-md-block">
den Text am Handy ausgeblendet.
Weiterhin habe ich zusätzlich die kleinen Balken zur Anzeige des Indikators am Smartphone bis 768px Displaybreite entfernt, indem ich noch die class="carousel-indicators" ausgeblendet habe. Diese Media-Anweisung habe ich in den Bereich "CSS Editor" von meinem Fader-Block kopiert.
@media (max-width: 768px) {
.carousel-indicators {
display: none;
}
}
Alleine die Bootstrap class="carousel-fade" macht hier aus einem Slider einen Fader. Entfernt diese Class, um einen Slider darzustellen. Die class="carousel-fade" könnte man bei jedem Mobirise-Slider, der nicht als Plugin eingefügt wurde, auch im "Code Editor" hinzufügen, um diesen zu einem Fader zu machen. Hier ein Beispiel mit diesem Umbau eines Slider-Blocks zu einem Fader aus dem Thema "ModernM4".
Wer keinen Text auf den Bildern anzeigen möchte, der kann diesen Bereich - unten im Code fett markiert - an jedem Bild auch entfernen.
Das Intervall des automatischen Bildwechsels steht per Bootsrap-Default auf 5 Sekunden. Hier habe ich dieses Intervall über das Bootstrap-Attribut data-interval="8000" somit auf 8 Sekunden geändert.
<!-- Beginn eigener Bootstrap Fader -->
<div id="carouselExampleIndicators" class="carousel slide carousel-fade" data-interval="8000" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1" class></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2" class></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="http://www.mobirise-tutorials.com/Testseiten/Testseite3/assets/images/Bild1.jpg" alt="Bilder">
<div class="carousel-caption d-none d-md-block">
<h5>Schmetterlinge</h5>
<p>Das ist ein händisch eingefügter Text</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="http://www.mobirise-tutorials.com/Testseiten/Testseite3/assets/images/Bild2.jpg">
<div class="carousel-caption d-none d-md-block">
<h5>Mohn</h5>
<p>Das ist ein händisch eingefügter Text</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="http://www.mobirise-tutorials.com/Testseiten/Testseite3/assets/images/Bild3.jpg">
<div class="carousel-caption d-none d-md-block">
<h5>Trollblume</h5>
<p>Das ist ein händisch eingefügter Text</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- Ende eigener Bootstrap Fader -->
Für die Dauer des Fade-Effekts habe ich hier noch folgende zusätzliche CSS in den Bereich "CSS Editor" des Blocks eingetragen, die diese Dauer von 0.6 auf 3 Sekunden erhöht:
.carousel-fade .carousel-item {
transition-duration: 3.0s;
}
Bemerkung:
Das Intervall des automatischen Bildwechsels habe ich oben bereits mit dem Bootstrap-Attribut data-interval="8000" auf 8 Sekunden geändert. Alternativ könntet Ihr dieses JavaSkript auch in den Seiteneinstellungen in den Bereich "End of <body> code" verwenden:
<!-- Intervall vom Slider / Fader - hier 8 Sekunden -->
<script>
$('.carousel').carousel({
interval: 8000
})
</script>