Guten Abend/Nacht liebe Community,
ich habe folgendes Problem:
In der template.xml ist folgendes hinterlegt:
Ich krieg jedoch folgenden Javascript nicht zum laufen, dieser ist unter templates\novachild\js\me-custom.js eingepflegt.
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:
HTML
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
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
Zuletzt bearbeitet: