Neu Eigenes Javascript funktioniert nicht

[SerdarC]

Guten Abend/Nacht liebe Community,

ich habe folgendes Problem:

In der template.xml ist folgendes hinterlegt:

<JS Name="jtl3.js"> <File Path="js/me-custom.js"/> </JS>

Ich krieg jedoch folgenden Javascript nicht zum laufen, dieser ist unter templates\novachild\js\me-custom.js eingepflegt.

document.addEventListener("DOMContentLoaded", function() { var slides = document.querySelectorAll('.slider-container-neu .slide'); var currentSlide = 0; var slideInterval = setInterval(nextSlide, 3000); function nextSlide() { slides[currentSlide].style.display = 'none'; currentSlide = (currentSlide + 1) % slides.length; slides[currentSlide].style.display = 'block'; } });

Auf Codepen mit entsprechendem html und CSS läuft der Spaß jedoch..
Hab ich zu später Stund' einen Durchhänger oder wieso klappt das ganze nicht ?

Der Vollständigkeitshalber hier auch der HTML und CSS Code:

CSS:

.under-banner { display: flex; } .slider-under-banner { margin-right: 0px; } .slider-under-banner img { width: 100%; height: auto; border-radius: 20px; } .sidebar { flex: 0 0 50%; margin-left: 10px; } .row { display: flex; flex-wrap: wrap; } .column { flex: 0 0 50%; } .column img { width: 100%; height: auto; margin-bottom: 5px; } .slider-neu { overflow: hidden; } .slider-neu .slider-under-banner { display: flex; transition: transform 0.5s ease; } .slider-neu .slide { flex: 0 0 auto; width: 100%; } .slider-neu .slide img { width: 100%; height: auto; }

HTML
<div class="container opc-Container slider-container-neu"> <div class="under-banner"> <div class="slider-neu"> <div class="slider-under-banner"> <div class="slide"><img src="BILD_URL" alt="Bild 1"></div> <div class="slide"><img src="BILD_URL" alt="Bild 2"></div> <div class="slide"><img src="BILD_URL" alt="Bild 3"></div> <div class="slide"><img src="BILD_URL" alt="Bild 4"></div> <div class="slide"><img src="BILD_URL" alt="Bild 5"></div> <div class="slide"><img src="BILD_URL" alt="Bild 6"></div> <div class="slide"><img src="BILD_URL" alt="Bild 7"></div> </div> </div> <div class="sidebar"> <!-- Bilder für die Seitenleiste --> <div class="row"> <div class="column"> <img src="BILD_URL" alt="Bild 1"> </div> <div class="column"> <img src="BILD_URL" alt="Bild 2"> </div> </div> <div class="row"> <div class="column"> <img src="BILD_URL" alt="Bild 3"> </div> <div class="column"> <img src="BILD_URL" alt="Bild 4"> </div> </div> </div> </div> </div>


Ich habe im OPC einen Container, darin einen Rich Text, dann den HTML Code hinterlegt.
Unter Einstellungen -> Template die eigenen CSS Klassen hinzugefügt - Soweit funktioniert alles.

Nur das mit dem Javascript klappt nicht so wie ich will.

EDIT: Hat sich erledigt, ohne Link zum .js wird das auch nix, somit erledigt