Zum Hauptinhalt
Abschlussbedingungen

Bootstrap Slider / Fader


Beschreibung

Diashow mit verschiedenen Einstellungsmöglichkeiten, erstellt mit der Bootstrap Komponente Carousel. Hinweis:  Bootstrap ist ein Web-Design-Standard, der von Moodle verstanden wird. Über Bearbeitung des HTML Quellcodes im Moodle Texteditor können Stilemente hinzugefügt und bearbeitet werden.

Hier ein Beispiel für die gleiche Diashow mit einem Blendeffekt (Fader) und Seitenanzeige (Indicator) am unteren Bildrand:

Wie geht das?

  1. Eine Textseite oder ein Textfeld erstellen und die Anzeige des HTML-Editors auf HTML Code umstellen:

    Screenshot

  2. Den folgenden Code einfügen und die Links auf die Abbildungen anpassen:

    Screenshot

    <div style="overflow: hidden;">
        <div class="carousel slide carousel-fade" data-ride="carousel" data-interval="1000" data-pause="false" id="carousel_abk">
            <div class="carousel-inner">
                <div class="carousel-item active"><img class="w-100 d-block" src="Bild1.png" alt="Slide Image 1"></div>
                <div class="carousel-item"><img class="w-100 d-block" src="Bild2.png" alt="Slide Image 2"></div>
                <div class="carousel-item"><img class="w-100 d-block" src="Bild3.png" alt="Slide Image 3"></div>
                <div class="carousel-item"><img class="w-100 d-block" src="Bild4.png" alt="Slide Image 4"></div>
                <div class="carousel-item"><img class="w-100 d-block" src="Bild5.png" alt="Slide Image 5"></div>
                <div class="carousel-item"><img class="w-100 d-block" src="Bild6.png" alt="Slide Image 6"></div>
            </div>
            <div>
                <a class="carousel-control-prev" href="#carousel_abk_02" role="button" data-slide="prev" style="height: 45px; width: 45px; margin: 27% 0 0 0; text-shadow: 2px 2px 4px #000;">
                    <i class="fas fa-chevron-left" style="color: #fff;font-size: 45px;"></i>
                    <span class="sr-only">Previous</span></a>
                <a class="carousel-control-next" href="#carousel_abk_02" role="button" data-slide="next" style="width: 45px; height: 45px; margin: 27% 0 0 0; text-shadow: 2px 2px 4px #000;">
                    <i class="fas fa-chevron-right" style="font-size: 45px; color: #fff;"></i>
                    <span class="sr-only">Next</span></a>
            </div>
            <ol class="carousel-indicators">
                <li data-target="#carousel_abk" data-slide-to="0" class="active"></li>
                <li data-target="#carousel_abk" data-slide-to="1"></li>
                <li data-target="#carousel_abk" data-slide-to="2"></li>
                <li data-target="#carousel_abk" data-slide-to="3"></li>
                <li data-target="#carousel_abk" data-slide-to="4"></li>
                <li data-target="#carousel_abk" data-slide-to="5"></li>
            </ol>
        </div>
    </div>

    Hinweis: Die Abbildungen können beispielsweise in einen Ordner im Kursraum hochgeladen werden. Die Links auf die Dateien dann hier anstatt Bild1.png, Bild2.png, ... einfügen.

  3. Das Textfeld bzw. die Textseite speichern. Nun wird ein Slider mit Überblendung (=Fader) und Seitenanzeige unten angezeigt. Änderungen im Code können jederzeit hinzugefügt werden. Anleitungen finden sich auf der Bootstrap-Dokumentation / Carousel.

Vor- und Nachteile

Vorteile
Über den HTML Editor kann das Design des Sliders individuell angepasst werden. Der Code kann in anderen Websites wiederverwendet werden.

Nachteile
Die Arbeit mit dem HTML Editor erfordert Kenntnisse im Umgang mit HTML und Bootstrap bzw. etwas Übung.