Text im Slider unter das Bild setzen?

[inno]

Hallo Tommy,
ist es möglich den Text im Slider (https://gk2tsgshzc.mobirisesite.com/), also Headline und Text unter das Bild zu setzen. Ich verwende das Theme Mobirise 5.
Außerdem sollte der Text in der Mobilversion auch erscheinen - das macht er leider auch nicht!
Das wäre toll, wenn du mir hier helfen könntest.
Viele Grüße, inno

[Tommy Herrmann]

Moin,

leider habe ich heute keine Zeit mehr.

Das geht so ja nicht. Unter dem Block ist ja nichts mehr, der besteht nur genau aus dem Inhalt mit den Bildern.

Man könnte es mit CSS nach unten schieben, dann schiebt man die Schift aber ganz aus dem Slider raus und diese ist nicht mehr sichtbar.

Am Handy kannst Du die Beschriftung sichtbar machen, indem Du diese class="d-md-block" änderst und ganz unten an den CSS Editor schreibst:

Code: Alles auswählen

.d-md-block {
  display: block !important;
}

Ich kann die weitere Fragen erst morgen beantworten.

[inno]

Hallo Tommy, kann man die Schrift / Text nicht unter das Bild setzen. Sie soll ja im Block erhalten bleiben.
Grüße inno

[Volker]

ich nix Tommy

Code: Alles auswählen

<section data-bs-version="5.1" class="slider2" group="Sliders & Galleries">
    <mbr-parameters>
        <input type="id" name="sliderId">
        <header>Size</header>
        <input type="checkbox" name="fullWidth" title="Full Width" checked>
        <input type="range" inline title="Height" name="carouselHeight" min="4" max="12" step="1" value="8">
        <input type="range" inline title="Top" name="paddingTop" min="0" max="10" step="1" value="5">
        <input type="range" inline title="Bottom" name="paddingBottom" min="0" max="10" step="1" value="5">
        <input type="range" name="textWidth" title="Width" min="4" max="12" step="1" value="10" condition="!fullWidth">
        <header>Carousel</header>
        <input type="checkbox" title="Fade Effect" name="fade">
        <input type="checkbox" title="Autoplay" name="autoplay">
        <input type="range" title="Interval" name="interval" min="3" max="10" value="5" step="1" condition="autoplay">
        <header>Background</header>
        <input type="color" title="Color" name="bgColor" value="#ffffff" selected>
    </mbr-parameters>

    <div mbr-class="{'container': !fullWidth, 'container-fluid': fullWidth}">
        <div class="row justify-content-center">
            <div class="col-12 col-md-{{textWidth}}" mbr-class="{'col-lg-12':fullWidth}">
                <div id="{{sliderId}}" class="carousel slide" mbr-class="{'carousel-fade': fade}" data-bs-ride="{{autoplay ? 'carousel' : false}}" data-bs-interval="{{interval*1000}}">
                    
                    <div class="carousel-inner">
                        <div class="carousel-item slider-image item active" data-title="Titel 1" data-text="Text für Slide 1">
                            <img class="d-block w-100" src="../_images/background3.jpg" alt="Slide 1">
                        </div>
                        <div class="carousel-item slider-image item" data-title="Titel 2" data-text="Text für Slide 2">
                            <img class="d-block w-100" src="../_images/background5.jpg" alt="Slide 2">
                        </div>
                        <div class="carousel-item slider-image item" data-title="Titel 3" data-text="Text für Slide 3">
                            <img class="d-block w-100" src="../_images/background8.jpg" alt="Slide 3">
                        </div>
                    </div>

                    <a class="carousel-control carousel-control-prev" href="#{{sliderId}}" role="button" data-bs-slide="prev">
                        <span class="mobi-mbri mobi-mbri-arrow-prev" aria-hidden="true"></span>
                    </a>
                    <a class="carousel-control carousel-control-next" href="#{{sliderId}}" role="button" data-bs-slide="next">
                        <span class="mobi-mbri mobi-mbri-arrow-next" aria-hidden="true"></span>
                    </a>
                </div>

                <div class="text-slider-content text-center mt-4">
                    <h5 id="dyn-title" class="mbr-section-subtitle mbr-fonts-style display-5"><b>Titel 1</b></h5>
                    <p id="dyn-text" class="mbr-section-text mbr-fonts-style display-7">Text für Slide 1</p>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            var slider = document.querySelector('#{{sliderId}}');
            var titleEl = document.getElementById('dyn-title');
            var textEl = document.getElementById('dyn-text');

            slider.addEventListener('slid.bs.carousel', function (e) {
                var activeItem = e.relatedTarget;
                titleEl.innerHTML = '<b>' + activeItem.getAttribute('data-title') + '</b>';
                textEl.innerText = activeItem.getAttribute('data-text');
            });
        });
    </script>
</section>

css:

Code: Alles auswählen

padding-top: (@paddingTop * 1rem);
padding-bottom: (@paddingBottom * 1rem);
background-color: @bgColor;
@media (min-width: 992px) {
  .carousel {
    min-height: (@carouselHeight * 100px);
    img {
      max-height: (@carouselHeight * 100px);
      object-fit: contain;
    }
  }
}
@media (max-width: 991px) and (min-width: 768px) {
  .carousel {
    min-height: (@carouselHeight * 65px);
    img {
      max-height: (@carouselHeight * 65px);
      object-fit: contain;
    }
  }
}
@media (max-width: 767px) {
  .carousel {
    min-height: (@carouselHeight * 55px);
    img {
      max-height: (@carouselHeight * 55px);
      object-fit: contain;
    }
  }
  .carousel-control {
    top: auto;
    bottom: 1rem;
  }
}
.carousel, .carousel-inner {
  display: flex;
  align-items: center;
}
.item-wrapper {
  width: 100%;
}
.carousel-control {
  top: 50%;
  width: 60px;
  height: 60px;
  margin-top: -1.5rem;
  font-size: 22px;
  background-color: rgba(0, 0, 0, 0.5);
  border: 2px solid #fff;
  border-radius: 50%;
  transition: all 0.3s;
  &.carousel-control-prev {
    left: 0;
    margin-left: 2.5rem;
  }
  &.carousel-control-next {
    right: 0;
    margin-right: 2.5rem;
  }
}
.carousel-indicators {
  position: absolute;
  bottom: 0;
  margin-bottom: 1.5rem !important;
  li {
    width: 15px;
    height: 15px;
    margin: 3px;
    background-color: rgba(0, 0, 0, 0.5);
    border: 2px solid #fff;
    border-radius: 50%;
    opacity: 0.5;
    &.active, &:hover {
      opacity: 0.9;
    }
  }
  @media (max-width: 768px) {
    display: none !important;
  }
}
H5 {
  color: #e43f3f;
}

[Volker]

Und hier die Version wo die Texte auch mit den Crad swechseln

Code: Alles auswählen

<section data-bs-version="5.1" class="slider2" group="Sliders & Galleries">
    <mbr-parameters>
        <input type="id" name="sliderId">
        <header>Size</header>
        <input type="checkbox" name="fullWidth" title="Full Width">
        <input type="range" inline title="Height" name="carouselHeight" min="4" max="12" step="1" value="8">
        <input type="range" inline title="Top" name="paddingTop" min="0" max="10" step="1" value="5">
        <input type="range" inline title="Bottom" name="paddingBottom" min="0" max="10" step="1" value="5">
        <input type="range" name="textWidth" title="Width" min="4" max="12" step="1" value="10" condition="!fullWidth">
        <header>Carousel</header>
        <input type="checkbox" title="Fade Effect" name="fade" checked>
        <input type="checkbox" title="Autoplay" name="autoplay">
        <input type="range" title="Interval" name="interval" min="3" max="10" value="5" step="1" condition="autoplay">
        <header>Background</header>
        <input type="color" title="Color" name="bgColor" value="#ffffff" selected>
    </mbr-parameters>

    <div mbr-class="{'container': !fullWidth, 'container-fluid': fullWidth}">
        <div class="row justify-content-center">
            <div class="col-12 col-md-{{textWidth}}" mbr-class="{'col-lg-12':fullWidth}">
                <div id="{{sliderId}}" class="carousel slide" mbr-class="{'carousel-fade': fade}" data-bs-ride="{{autoplay ? 'carousel' : false}}" data-bs-interval="{{interval*1000}}">
                    <div class="carousel-inner">
                        <div class="carousel-item slider-image item active">
                            <img class="d-block w-100" src="../_images/background3.jpg" alt="Slide 1">
                            <div class="custom-caption">
                                <h5 class="mbr-section-subtitle mbr-fonts-style display-5"><b>Titel 1</b></h5>
                                <p class="mbr-section-text mbr-fonts-style display-7">Text für Slide 1</p>
                            </div>
                        </div>
                        <div class="carousel-item slider-image item">
                            <img class="d-block w-100" src="../_images/background5.jpg" alt="Slide 2">
                            <div class="custom-caption">
                                <h5 class="mbr-section-subtitle mbr-fonts-style display-5"><b>Titel 2</b></h5>
                                <p class="mbr-section-text mbr-fonts-style display-7">Text für Slide 2</p>
                            </div>
                        </div>
                        <div class="carousel-item slider-image item">
                            <img class="d-block w-100" src="../_images/background8.jpg" alt="Slide 3">
                            <div class="custom-caption">
                                <h5 class="mbr-section-subtitle mbr-fonts-style display-5"><b>Titel 3</b></h5>
                                <p class="mbr-section-text mbr-fonts-style display-7">Text für Slide 3</p>
                            </div>
                        </div>
                    </div>
                    <a class="carousel-control carousel-control-prev" href="#{{sliderId}}" role="button" data-bs-slide="prev"><span class="mobi-mbri mobi-mbri-arrow-prev"></span></a>
                    <a class="carousel-control carousel-control-next" href="#{{sliderId}}" role="button" data-bs-slide="next"><span class="mobi-mbri mobi-mbri-arrow-next"></span></a>
                </div>
            </div>
        </div>
    </div>
</section>

css:

Code: Alles auswählen

.carousel-item {
  display: flex !important;
  flex-direction: column;
}
.custom-caption {
  width: 100%;
  text-align: center;
  padding-top: 1.5rem;
  padding-bottom: 1rem;
  color: inherit;
}
.carousel-inner {
  overflow: visible;
}
.carousel-control {
  z-index: 10;
}
.slider2 {
  padding-top: (@paddingTop * 1rem);
  padding-bottom: (@paddingBottom * 1rem);
  background-color: @bgColor;
}

zum Beispiel

Muss ja Tommy auch mal etwas entlasten, der Arme hat genug mit meinen Tests zu tun

[inno]

Hi Volker!
Vielen Dank dir! Wo muss ich das genau einbauen? Grüße inno

[Volker]

Hi Volker!
Vielen Dank dir! Wo muss ich das genau einbauen? Grüße inno

In Mobirise den oberen code in den linken HTML Teil den Code für >CSS eben rechts ins CSS Fenster.
Du kannst das in entweder in deinen jetzigen block rein kopieren oder du nimmst einen artikelblock und leerst den und stellst meinen Code da rein.

[Tommy Herrmann]

Volker postet imm den gesamten HTML - und auch den gesamten CSS-Code.

Öffne also mit dem "Code Editor" diesen Block und löschen alles. Dann kopiere den HTML (ersten) Code links und den CSS (zweiten) Code in den rechten Bereich vom Code-Editor.

Test (vom zweiten Code mit wechselnden Titeln):

https://www.mobirise-tutorials.com/Vorl ... tml#Slider

Beispiel wird wieder gelöscht ...


P.S.::

Volkers Schluder-KI hat da allerdings einiges falsch gemacht. Man kann z.B. die Farbe vom Hintergrund nicht mehr einstellen und auch nicht die voille Breite. Das musss aber Volker richten

[Volker]

Volkers Schluder-KI hat da allerdings einiges falsch gemacht. Man kann z.B. die Farbe vom Hintergrund nicht mehr einstellen und auch nicht die voille Breite. Das musss aber Volker richten

Ha ha das war nicht Volker Schlampen Ki das Volker himself - deswgen die Fehler :-?
Fixe ich heute nach Feierabend

[Volker]

Hier gefixt von der Schluder KI

Code: Alles auswählen

<section data-bs-version="5.1" class="slider2" group="Sliders & Galleries" mbr-style="{'background-color': bgColor}">
    <mbr-parameters>
        <input type="id" name="sliderId">
        <header>Size</header>
        <input type="checkbox" name="fullWidth" title="Full Width" checked>
        <input type="range" inline title="Height" name="carouselHeight" min="4" max="12" step="1" value="8">
        <input type="range" inline title="Top" name="paddingTop" min="0" max="10" step="1" value="5">
        <input type="range" inline title="Bottom" name="paddingBottom" min="0" max="10" step="1" value="5">
        <input type="range" name="textWidth" title="Width" min="4" max="12" step="1" value="10" condition="!fullWidth">
        <header>Carousel</header>
        <input type="checkbox" title="Fade Effect" name="fade" checked>
        <input type="checkbox" title="Autoplay" name="autoplay">
        <input type="range" title="Interval" name="interval" min="3" max="10" value="5" step="1" condition="autoplay">
        <header>Background</header>
        <input type="color" title="Color" name="bgColor" value="#ffb18a">
    </mbr-parameters>

    <div mbr-class="{'container': !fullWidth, 'container-fluid': fullWidth}">
        <div class="row justify-content-center">
            <div class="col-12 col-md-{{fullWidth ? '12' : textWidth}}">
                
                <div id="{{sliderId}}" class="carousel slide" mbr-class="{'carousel-fade': fade}" data-bs-ride="{{autoplay ? 'carousel' : false}}" data-bs-interval="{{interval*1000}}">
                    
                    <a class="carousel-control carousel-control-prev" href="#{{sliderId}}" role="button" data-bs-slide="prev">
                        <span class="mobi-mbri mobi-mbri-arrow-prev" aria-hidden="true"></span>
                    </a>
                    <a class="carousel-control carousel-control-next" href="#{{sliderId}}" role="button" data-bs-slide="next">
                        <span class="mobi-mbri mobi-mbri-arrow-next" aria-hidden="true"></span>
                    </a>

                    <div class="carousel-inner">
                        <div class="carousel-item slider-image item active">
                            <img class="d-block w-100" src="../_images/background3.jpg" alt="Slide 1">
                            <div class="custom-caption">
                                <h5 class="mbr-section-subtitle mbr-fonts-style display-5"><b>Titel 1</b></h5>
                                <p class="mbr-section-text mbr-fonts-style display-7">Text für Slide 1</p>
                            </div>
                        </div>
                        <div class="carousel-item slider-image item">
                            <img class="d-block w-100" src="../_images/background5.jpg" alt="Slide 2">
                            <div class="custom-caption">
                                <h5 class="mbr-section-subtitle mbr-fonts-style display-5"><b>Titel 2</b></h5>
                                <p class="mbr-section-text mbr-fonts-style display-7">Text für Slide 2</p>
                            </div>
                        </div>
                        <div class="carousel-item slider-image item">
                            <img class="d-block w-100" src="../_images/background8.jpg" alt="Slide 3">
                            <div class="custom-caption">
                                <h5 class="mbr-section-subtitle mbr-fonts-style display-5"><b>Titel 3</b></h5>
                                <p class="mbr-section-text mbr-fonts-style display-7">Text für Slide 3</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

css

Code: Alles auswählen

´.slider2 {
  padding-top: (@paddingTop * 1rem);
  padding-bottom: (@paddingBottom * 1rem);
}
.carousel {
  position: relative;
}
.carousel-item {
  display: none !important;
  flex-direction: column;
}
.carousel-item.active {
  display: flex !important;
}
.carousel-fade .carousel-item {
  opacity: 0;
  transition-property: opacity;
  display: block !important;
}
.carousel-fade .carousel-item.active {
  opacity: 1;
  display: flex !important;
}
.custom-caption {
  width: 100%;
  text-align: center;
  padding-top: 1.5rem;
  padding-bottom: 1rem;
  color: inherit;
}
.carousel-inner {
  overflow: visible;
}
.carousel-control {
  position: absolute;
  top: 40%;
  z-index: 10;
  width: 60px;
  height: 60px;
  background-color: rgba(0, 0, 0, 0.5);
  border: 2px solid #fff;
  border-radius: 50%;
  display: flex !important;
  align-items: center;
  justify-content: center;
  opacity: 0.8;
  transition: all 0.3s;
  cursor: pointer;
  &.carousel-control-prev {
    left: 2.5rem;
  }
  &.carousel-control-next {
    right: 2.5rem;
  }
  &:hover {
    opacity: 1;
    background: #1b1b1b;
  }
}
@media (max-width: 767px) {
  .carousel-control {
    width: 40px;
    height: 40px;
    &.carousel-control-prev {
      left: 1rem;
    }
    &.carousel-control-next {
      right: 1rem;
    }
  }
}

[Tommy Herrmann]

nee - jetzt funktioniert der wählbare "Slider" nicht mehr - der "Fader" funktioniert schon.

https://www.mobirise-tutorials.com/Vorl ... tml#Slider

Beispiel wird wieder gelöscht ...

[Volker]

Das zum Thema KI

Mach ich jetzt noch fertig warte...

CSS korrigiert - Fehler von KI ist oben im code korrigiert Tommy bitte neu testen

[Volker]

mein letzer Code ist also jetzt 100% OK HAB NUR css GEÄNDERT

[Tommy Herrmann]

Ja - ich glaube jetzt geht es

[inno]

Hallo zusammen, vielen Dank schon mal für die Hilfe. Ich teste das am Wochenende. Viele Grüße