Slider hinter einem transparenten Bild

[Tommy Herrmann]

Moin,

jetzt habe ich auch mal so einen Block gebaut, hier mit der Hilfe von ChatGPT:

https://www.mobirise-tutorials.com/AI-B ... er-ChatGPT

Das ist also ein Slider, der als Hintergrund von einem transparenten PNG (hier mein Logo) verwendet wird.

Hier die Erweiterung:

https://www.mobirise-tutorials.com/AI-B ... png.mbrext

Wenn das einer testen will, bitte daran denken sämtliche Bilder zunächst mit den eigenen Bildern zu versehen.

[Volker]

Huhu Tommy,

hab mir erlaubt etwas zu korrigieren

Code: Alles auswählen

<section data-bs-version="5.1" class="ai-showcase position-relative overflow-hidden" group="Content" style="padding-top: {{paddingTop}}rem; padding-bottom: {{paddingBottom}}rem; background-color: {{bgColor}};">
    
    <mbr-parameters>
        <header>Block Abstände</header>
        <input type="checkbox" title="Full Width" name="fullWidth">
        <input type="range" inline title="Oben (Zop)" name="paddingTop" min="0" max="15" step="1" value="8">
        <input type="range" inline title="Unten (Botton)" name="paddingBottom" min="0" max="15" step="1" value="6">
        <input type="range" name="textWidth" title="Textbreite" min="4" max="12" value="9" step="1">
        
        <header>Produktbild Einstellungen</header>
        <input type="image" title="PNG wählen" name="productImg" value="file:///F:/mobirise%20Bl%C3%B6cke/demo2/assets/images/logo5-3.png">
        <input type="range" title="Bild Größe" name="pSize" min="50" max="1000" step="10" value="560">
        <input type="range" title="Position Y" name="pY" min="-300" max="300" step="5" value="25">

        <header>Anzeigen</header>
        <input type="checkbox" title="Title" name="showTitle" checked>
        <input type="checkbox" title="Subtitle" name="showSubtitle" checked>
        
        <header>Hintergrund</header>
        <input type="color" title="Color" name="bgColor" value="#0c2c68">
    </mbr-parameters>

    <div mbr-class="{'container': !fullWidth, 'container-fluid': fullWidth}">
        <div class="row justify-content-center text-center">
            <div class="col-md-12 col-lg-{{textWidth}}">
                <h3 class="mbr-section-title mbr-fonts-style mb-4" mbr-if="showTitle" mbr-theme-style="display-2">
                    <b>Article Title</b>
                </h3>
                <h4 class="mbr-section-subtitle mbr-fonts-style mb-4" mbr-if="showSubtitle" mbr-theme-style="display-5">
                    Slider von ChatGPT
                </h4>
                <p class="mbr-text mbr-fonts-style" mbr-theme-style="display-7">
                    Diesen Slider habe ich mit der Hilfe von ChatGPT erstellt.<br>Download der Erweiterung als .mbrext Datei.
                </p>
            </div>
        </div>
    </div>

    <div class="ai-slider-full position-relative">
        <div class="ai-slider-wrap">
            <div class="ai-slider-track">
                <div class="ai-slider-group">
                    <div class="ai-slide-item"><img src="file:///C:/Users/Thoma/Documents/Mobirise/AI-Beispiele/assets/images/mbr-4.jpg"></div>
                    <div class="ai-slide-item"><img src="file:///F:/mobirise%20Bl%C3%B6cke/demo2/assets/images/jellyfish-1024x768.jpg" alt></div>
                    <div class="ai-slide-item"><img src="file:///F:/mobirise%20Bl%C3%B6cke/demo2/assets/images/mbr-14-1920x1280.jpg" alt></div>
                    <div class="ai-slide-item"><img src="file:///F:/mobirise%20Bl%C3%B6cke/demo2/assets/images/mbr-1920x1285.jpg"></div>
                    <div class="ai-slide-item"><img src="file:///F:/mobirise%20Bl%C3%B6cke/demo2/assets/images/mbr-1920x1279.jpg"></div>
                    <div class="ai-slide-item"><img src="file:///F:/mobirise%20Bl%C3%B6cke/demo2/assets/images/mbr-1920x1148.jpg"></div>
                </div>
                <div class="ai-slider-group">
                    <div class="ai-slide-item"><img src="file:///F:/mobirise%20Bl%C3%B6cke/demo2/assets/images/background13.jpg" alt></div>
                    <div class="ai-slide-item"><img src="file:///F:/mobirise%20Bl%C3%B6cke/demo2/assets/images/desert-1024x768.jpg" alt></div>
                    <div class="ai-slide-item"><img src="file:///F:/mobirise%20Bl%C3%B6cke/demo2/assets/images/mbr-1470x1920.jpg"></div>
                    <div class="ai-slide-item"><img src="../../app/themes/startm5/components/_images/background1.jpg" alt></div>
                    <div class="ai-slide-item"><img src="file:///F:/mobirise%20Bl%C3%B6cke/demo2/assets/images/mbr-2-1920x1440.jpg" alt></div>
                    <div class="ai-slide-item"><img src="file:///F:/mobirise%20Bl%C3%B6cke/demo2/assets/images/mbr-3-1920x1280.jpg" alt></div>
                </div>
            </div>
        </div>

        <div class="ai-center-overlay" style="transform: translate(-50%, calc(-50% + {{pY}}px));">
            <img src="file:///F:/mobirise%20Bl%C3%B6cke/demo2/assets/images/mbr-1120x656.png" style="width: {{pSize}}px; max-width: none;" alt>
        </div>
    </div>
</section>

css:

Code: Alles auswählen

background-color: @bgColor;
.ai-showcase {
  min-height: 420px;
  position: relative;
  overflow: hidden;
}
.ai-slider-full {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  position: relative;
}
.ai-slider-wrap {
  height: 320px;
  display: flex;
  align-items: center;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.ai-slider-track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: aiScrollLoop 42s linear infinite;
}
.ai-slider-group {
  display: flex;
  align-items: center;
  gap: 22px;
  flex: 0 0 auto;
  padding-right: 22px;
}
.ai-slide-item {
  flex: 0 0 auto;
  width: 180px;
  height: 240px;
  border-radius: 18px;
  overflow: hidden;
  background: #111827;
}
.ai-slide-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ai-center-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 10;
  pointer-events: none;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
.ai-center-overlay img {
  height: auto;
  display: block;
  filter: drop-shadow(0 20px 50px rgba(0, 0, 0, 0.5));
  pointer-events: auto !important;
}
@keyframes aiScrollLoop {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-33.333333%);
  }
}
.mbr-section-subtitle, .mbr-text {
  text-align: center;
  color: #ffffff;
}

So ist einfacher das PNG einzufügen und in der Größe und Position zu verstellen
und Top und Bottom geht jetzt auch

[Tommy Herrmann]

--- ah - OK - muss ich noch testen (kann gerade nicht)

... aber schon am Code sehe ich, dass Du eine Bildgruppe entfernt hast. Das sollte zu einer unschönen Anzeige an großen Bildschirmen führen (Slider unterbricht). Zeige mal diese (Deine) Variante online ...

[Volker]

https://www.niederastroth.de/tommy/

Hab ich auf die Schnelle gemacht (ohne KI), kann sein das ich geschlampt habe

[Tommy Herrmann]

Prima - dann werde ich die HTML und CSS von Dir kopieren. Das muss was verloren gegangen sein mit den Abständen

Das mit der Bildwahl ist natürlich bei Dir viel besser. Melde mich, wenn ich es probiert habe.

Wenn Du willst, kannst Du diese .mbrext Erweiterung natürlich gerne auch bei Dir in der Sammlung anbieten.

Danke ...

[Volker]

Werde ich Tommy,

wenn Du sie perfekt hast

Natürlich mit Link auf Deine Seite

[Tommy Herrmann]

... da stimmt noch etwas nicht bei Dir.

Mein PNG (Logo) kann ich nicht über die Werkzeuge einfügen. Das muss ich aber nun auch nicht unbedingt haben.

[Volker]

dann klick mal auf das png in der arbeitsfläche dann gehts aber

https://www.niederastroth.de/tommy/

Mobirise zickt auch manchmal rum

Den Text muss man auch noch über den Layer setzen sehe ich gerade. Hast was zu tun

[Volker]

Derweil bastel ich an dem Thermomix

https://www.niederastroth.de/tommy/tommy.html

Hier die Version erstmal in Billig

Musst schon einiges runter scrollen

[Tommy Herrmann]

na ja - fast

Mach' mal Licht an

Inzwischen habe ich meine .mbrext Erweiterung nochmals neu erstellt - diesmal ohne den Fehler der fehlenden Abstände oben und unten (padding)

Den Text muss man auch noch über den Layer setzen sehe ich gerade. Hast was zu tun

... wozu das denn

Der Text ist doch die ganz normale Block-Überschrift, die soll doch nicht im Bereich vom Slider angewendet werden, entsprechend eben auch nicht über dem Layer-Bild

[Tommy Herrmann]

"Tommy Design" ist der Meinung, dass Dein Vordergrundbild (Handy) nicht mittig sitzt (schlimm am Handy) und dass sicherlich ein Bild, durch das man nicht hindurchgucken kann, hier besseres Design wäre. Der Witz ist bei dieser Anwendung doch, dass der überall sichtbare Slider eben hinter einem Bild verschwindet.

Deine Variante ist auch falsch geändert. Der Slider "springt" nach dem zwölften Bild unschön, da dieser dann den Bildschirm nicht mehr füllt. Deswegen meine 3 Bildergruppen und eben nicht zwei.

Wolltest Du (wie jetzt) 12 verschiedene Bilder, dann müsste jede der 3 Gruppen auch 12 Bilder haben um diese korrekt zu wiederholen.

Die Idee sind eben 3 Wiederholungen einer Bildgruppe von hier 6 Bildern. Ansonsten gibt es Fehler.



Bei meinem Original "springt" daher nichts:

https://www.mobirise-tutorials.com/AI-B ... er-ChatGPT

[Volker]

Hier mein Hinweis als Video, damit wir nicht aneinander vorbei reden

[Tommy Herrmann]

ja klar - die Arbeit mit dem Video hättest Du Dir sparen können - das ist mir vollkommen bewusst, dass man das Vordergrundbild "händisch" (so wie Du es zeigst) einbauen soll und muss.

Ist eben eine Erweiterung für Fortgeschrittene

Ich werde das morgen mal angucken und eventuell mittels Klick oder es auch über die Toolbox ändern.

[Tommy Herrmann]

OK - tausche mal die vorhandene CSS mit dieser und gut ist:

Code: Alles auswählen

padding-top: (@paddingTop * 1rem);
padding-bottom: (@paddingBottom * 1rem);
background-color: @bgColor;

.ai-showcase {
  min-height: 420px;
  position: relative;
  overflow: hidden;
}

.ai-slider-full {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  position: relative;
  margin-top: 2rem;
}

.ai-slider-wrap {
  height: 320px;
  display: flex;
  align-items: center;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.ai-slider-track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: aiScrollLoop 42s linear infinite;
}

.ai-slider-group {
  display: flex;
  align-items: center;
  gap: 22px;
  flex: 0 0 auto;
  padding-right: 22px;
}

.ai-slide-item {
  flex: 0 0 auto;
  width: 180px;
  height: 240px;
  border-radius: 18px;
  overflow: hidden;
  background: #111827;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  opacity: 0.95;
}

.ai-slide-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Overlay blockiert keine Klicks */
.ai-center-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  text-align: center;
  width: 100%;
  pointer-events: none;
}

/* Nur das PNG selbst ist klickbar */
.ai-center-overlay img {
  max-width: 380px;
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  pointer-events: auto;
  cursor: pointer;
}

.mbr-section-subtitle {
  text-align: center;
  color: #ffffff;
}

.mbr-text {
  text-align: center;
  color: #ffffff;
}

@keyframes aiScrollLoop {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-33.333333%);
  }
}

@media (max-width: 991.98px) {
  .ai-showcase {
    min-height: 360px;
  }

  .ai-slider-full {
    margin-top: 1.75rem;
  }

  .ai-slider-wrap {
    height: 260px;
  }

  .ai-slider-group {
    gap: 18px;
    padding-right: 18px;
  }

  .ai-slide-item {
    width: 140px;
    height: 190px;
  }

  .ai-center-overlay img {
    max-width: 280px;
  }

  .ai-slider-track {
    animation-duration: 34s;
  }
}

@media (max-width: 575.98px) {
  .ai-showcase {
    min-height: 300px;
  }

  .ai-slider-full {
    margin-top: 1.25rem;
  }

  .ai-slider-wrap {
    height: 220px;
  }

  .ai-slider-group {
    gap: 14px;
    padding-right: 14px;
  }

  .ai-slide-item {
    width: 110px;
    height: 150px;
    border-radius: 14px;
  }

  .ai-center-overlay img {
    max-width: 210px;
  }

  .ai-slider-track {
    animation-duration: 28s;
  }
}

Die Erweiterung (.mbrext Datei) zum Importieren habe ich auch geändert und am Server zum Download.

[Volker]

Jetzt ist schön

[Tommy Herrmann]

Drum verschiebe nicht auf morgen, was Du heute kannst besorgen

[Volker]

Ich konnte es nicht lassen

Die Idee mit dem Layer und darunter die Slider Bilder zu zeigen hat mir eben gut gefallen

Sollte auch auf Handy jetzt gut aussehen

https://www.niederastroth.de/tommy/

[Tommy Herrmann]

... so ist das ja auch gedacht.

[Tommy Herrmann]

Moin,

habe noch eine Variante mit einem gegenläufigen Slider erstellt.

Dieser Slider stoppt auch bei Mausüber und hebt die Bilder ein wenig vor:

https://www.mobirise-tutorials.com/AI-B ... r-rotating

Die .mbrext Erweiterung findet ihr zum Download am Button unter dem Slider.

[Volker]

Tommy hat Blut geleckt

Prima

Jetzt noch ne Lightbox drauf