Malibu Theme - Marquee mit Javascript funktioniert nicht

Via CodePen.io habe ich einen Marquee gefunden und für meinen GX 4.7.2.3 auf PHP 7.4.3 entsprechend angepasst.
Er läuft in der CodePen-Umgebung und auch heruntergeladen auf dem PC einwandfrei.

Nach Anleitung unter https://developers.gambio.de/tutorials.html?v=4.8.0.0_beta1&p=anlegen-neuer-javascript-inhalte habe ich das JS und die CSS angelegt.
/GXModules/EigeneMods/Marquee/Shop/Themes/Malibu/Javascript/Global/marquee.js
/GXModules/EigeneMods/Marquee/Shop/Themes/Malibu/Css/marquee.css

Den Inhalt der HTML habe ich in StyleEdit > Neue Sektion > HTML-Widget gepackt.

Nach Leeren aller Caches wird der Marquee leider nur als einfacher Streifen angezeigt.
Einige Elemente aus der marquee.css sind in den Dev-Tools sichtbar.
Von dem marquee.js fehlt aber jede Spur.

Ich ging davon aus, dass aufgrund der Gambio-Anleitung auch die JS beim Seitenaufruf mitgeladen wird.
Die Anleitung https://developers.gambio.de/docs/4.8.0.0_beta1/tutorials-gx4/theme-development/scripts/ funktioniert genauso wenig.

Einen Testshop zum Zeigen habe ich leider nicht. Vielleicht hat trotzdem jemand einen heißen Tipp?
Fehlen vielleicht noch wichtige Elemente?

HTML

HTML:

<div class="marquee">
    <ul class="marquee-content">
        <li><a href="/index.php?manufacturers_id=2"><img src="/images/traxxas.jpg"></a></li>
        <li><a href="/index.php?manufacturers_id=3"><img src="/images/reely.jpg"></a></li>
        <li><a href="/index.php?manufacturers_id=4"><img src="/images/mst.jpg"></a></li>
        <li><a href="/index.php?manufacturers_id=5"><img src="/images/gmade.jpg"></a></li>
        <li><a href="/index.php?manufacturers_id=6"><img src="/images/fm-electrics.jpg"></a></li>
        <li><a href="/index.php?manufacturers_id=7"><img src="/images/df.jpg"></a></li>
        <li><a href="/index.php?manufacturers_id=8"><img src="/images/carisma.jpg"></a></li>
        <li><a href="/index.php?manufacturers_id=9"><img src="/images/axial.jpg"></a></li>
        <li><a href="/index.php?manufacturers_id=10"><img src="/images/absima.jpg"></a></li>
        <li><a href="/index.php?manufacturers_id=11"><img src="/images/amewi.jpg"></a></li>
        <li><a href="/index.php?manufacturers_id=12"><img src="/images/yikong.jpg"></a></li>
    </ul>
</div>

marquee.js

Code:

const root = document.documentElement;
const marqueeElementsDisplayed = getComputedStyle(root).getPropertyValue("--marquee-elements-displayed");
const marqueeContent = document.querySelector("ul.marquee-content");

root.style.setProperty("--marquee-elements", marqueeContent.children.length);

for(let i=0; i<marqueeElementsDisplayed; i++) {
  marqueeContent.appendChild(marqueeContent.children[i].cloneNode(true));
}

marquee.css

Code:

:root {
  --marquee-width: 80vw;
  --marquee-height: 20vh;
  --marquee-elements-displayed: 5;
  --marquee-element-width: calc(var(--marquee-width) / var(--marquee-elements-displayed));
  --marquee-animation-duration: calc(var(--marquee-elements) * 3s);
}

.marquee {
  width: var(--marquee-width);
  height: var(--marquee-height);
  background-color: #e6e6e6;
  color: #111;
  overflow: hidden;
  position: relative;
}
.marquee:before, .marquee:after {
  position: absolute;
  top: 0;
  width: 10rem;
  height: 100%;
  content: "";
  z-index: 1;
}
.marquee:before {
  left: 0;
  background: linear-gradient(to right, #e6e6e6 0%, transparent 100%);
}
.marquee:after {
  right: 0;
  background: linear-gradient(to left, #e6e6e6 0%, transparent 100%);
}
.marquee-content {
  list-style: none;
  height: 100%;
  display: flex;
  animation: scrolling var(--marquee-animation-duration) linear infinite;
}

@keyframes scrolling {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(-1 * var(--marquee-element-width) * var(--marquee-elements))); }
}
.marquee-content li {
  display: flex;
  justify-content: center;
  align-items: center;
  /* text-align: center; */
  flex-shrink: 0;
  width: var(--marquee-element-width);
  max-height: 100%;
  font-size: calc(var(--marquee-height)*3/4); /* 5rem; */
  white-space: nowrap;
}

@media (max-width: 600px) {
  html { font-size: 12px; }
  :root {
    --marquee-width: 100vw;
    --marquee-height: 16vh;
    --marquee-elements-displayed: 3;
  }
  .marquee:before, .marquee:after { width: 5rem; }
}

 

Das ist so nicht richtig! Ein Marquee ist erstmal eine Laufschrift. Grundsätzlich ist nichts dagegen einzuwenden, sofern man damit umgehen kann und sich nicht die komplette Seite damit zukleistert.
Du beziehst dich vermutlich auf die Funktion <marquee>. Davon rät Mozilla tatsächlich ab. Seit vielen Jahren schon

Es geht hier aber auch gar nicht um die Funktion, sondern um die Laufschrift als solche, bzw. ein Laufband für Herstellerlogos. Und wie du dem Code entnehmen kannst, will ich das natürlich nur mit CSS realisieren. Das Javascript brauche nur, um bei Änderung des Bandes die Menge der Logos nicht manuell im CSS ändern zu müssen.

@Devil
Ich will ja ein endloses Laufband haben, ohne Unterbrechung. Ab Start alle Logos sofort sichtbar, ohne dass sie erst einlaufen müssen. Am Ende soll sich ohne Unterbrechung das erste Logo wieder anschließen. Ich bin sicher, dass das mit <marquee> so nicht machbar ist.

Mittlerweile bin ich aber auch fertig.
Das Problem lag nur beim CSS selbst. Weil darin Variablen verwendet werden, muss das als main.scss unter /GXModules/EigeneMods/Marquee/Shop/Themes/Malibu/Css/main.scss gespeichert werden. In der aktuellen Gambio-Umgebung werden die Variablen sonst nicht verarbeitet.