Slider Proportional

Bitte guckt euch auch die Variante mit eigenen Videos an.

Hier ein Beispiel für einen proportional angepassten Slider mit einem eigenen Bootstrap-Code. Bitte guckt Euch auch die Möglichkeiten von Bootstrap zu diesem Karussell an:

https://getbootstrap.com/docs/5.0/components/carousel/

Dieser Code ist für "Mobirise5" Themen mit "Bootstrap5" gedacht. Das funktioniert mit etwas anderem Code aber auch in "Mobirise4" mit "Bootstrap4". Guckt dazu in den Quelltext einer meiner "Mobirise4" Testseiten mit diesem Slider.

Ich habe hier den Einbau als obersten Block vom Header vorgenommen. Hier habe ich dazu einen einfachen Textblock verwendet. Schiebt den Regler für die Breite des Textblocks in den Blockwerkzeugen auf die maximale Breite.

Meine Bilder für diesen Slider haben eine Größe von 1600 x 800px. Die Breite sollte nicht viel geringer sein, die Höhe kann natürlich variieren. Denkt daran, dass Bilder nie am Display vergrößert werden sollten, um nicht unscharf zu werden. 

Der Slider soll hier auf der vollen Display-Breite angezeigt werden, daher muss die class="container-fluid" am äußeren <div> verwendet werden. Mobirise verwendet diese Bootstrap-Class automatisch über eine Variable, wenn man die Breite in den Blockwerkzeugen auf maximal stellt.

Mobirise hat dieser Bootstrap-Class einen Innenabstand "padding" von 32px links und rechts gegeben, die ich hier überschreibe. Diese CSS-Anweisung gehört, ebenso wie alle anderen, in den Bereich "CSS Editor" vom "Code Editor":

.container-fluid {
  padding-left: 0px;
  padding-right: 0px;
  overflow: hidden;
}

Hier meine zusätzliche CSS zu diesem Slider. Ich wollte die Beschriftung mittig und den Text etwas hervorgehoben darstellen:

.carousel-caption {
  top: 50%;
  transform: translateY(-50%);
  padding-top: 50px;
}
h2 {
  font-size: 3rem;
  font-weight: bold;
}


Hier der Code des Sliders, den ich innerhalb der "row" in den "Code Editor" eingefügt habe (siehe Screenshot unten).

Das automatische Interval habe ich hier mit 5000 Millisekunden angegeben, natürlich kann man das beliebig anpassen und zum Beispiel jedem Bild eine andere Verweilzeit geben oder auch das automatische Blättern ganz entfernen.

Ebenso habe ich mit dem Attribut data-bs-pause="false" ein Stoppen des Sliders bei Mausüber verhindert.

Die Bilder müsst ihr natürlich zunächst händisch in das Verzeichnis eurer Wahl auf den Server kopieren.

Wenn ihr den Indikator der Bilder nicht anzeigen wollt, dann lasst dieses <div class="carousel-indicators"> im oberen Bereich vom Code einfach weg.

Wolltet ihr die beiden Pfeile zur Navigation vom Slider nicht anzeigen, dann lasst ihr diese beiden <button> Codes im unteren Bereich einfach weg.

<!-- Start Slider Full Width Caption -->
<div id="carouselExampleCaptions" class="carousel slide" data-bs-pause="false" data-bs-ride="carousel">

  <!-- Image Indicators Slider -->
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="3" aria-label="Slide 4"></button>
  </div>
 
  <div class="carousel-inner">

    <div class="carousel-item active" data-bs-interval="5000">
      <img class="d-block w-100" src="https://www.mobirise-tutorials.com/Tutorials/images/slider/morgens.jpg">
      <div class="carousel-caption d-none d-md-block">
        <h2>Morgens</h2>
        <h3>Ein schöner Urlaub auf den Malediven</h3>
      </div>
    </div>
    
    <div class="carousel-item" data-bs-interval="5000">
      <img class="d-block w-100" src="https://www.mobirise-tutorials.com/Tutorials/images/slider/mittags.jpg">
      <div class="carousel-caption d-none d-md-block">
        <h3>Mittags</h3>
        <p>Ein schöner Urlaub auf den Malediven</p>
      </div>
    </div>

    <div class="carousel-item" data-bs-interval="5000">
      <img class="d-block w-100" src="https://www.mobirise-tutorials.com/Tutorials/images/slider/nachmittags.jpg">
      <div class="carousel-caption d-none d-md-block">
        <h3>Nachmittags</h3>
        <p>Ein schöner Urlaub auf den Malediven</p>
      </div>
    </div>
    
    <div class="carousel-item" data-bs-interval="5000">
      <img class="d-block w-100" src="https://www.mobirise-tutorials.com/Tutorials/images/slider/abends.jpg">
      <div class="carousel-caption d-none d-md-block">
        <h2>Abends</h2>
        <h3>Ein schöner Urlaub auf den Malediven</h3>
      </div>
    </div>

  </div>

  <!-- Navigation Slider -->
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" 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="#carouselExampleCaptions" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>

</div>
<!-- End Slider Full Width Caption -->

Unten noch ein Screenshot vom "Code Editor".