Hi
Brauche eure Hilfer bezüglich einer HTML Slideshow
und zwar es geht immer nur bis zum 4.Bild dann bleibt es stehen.
Hab bisschen rumprobiert, nutz alles nichts
Würde jemanden bitten der sich damit auskennt
mir zu helfen 10-12 Bilder einzubauen.
Hier der aktuelle HTML Code
Vielen Dank!
Mfg
Brauche eure Hilfer bezüglich einer HTML Slideshow
und zwar es geht immer nur bis zum 4.Bild dann bleibt es stehen.
Hab bisschen rumprobiert, nutz alles nichts
Würde jemanden bitten der sich damit auskennt
mir zu helfen 10-12 Bilder einzubauen.
Hier der aktuelle HTML Code
PHP:
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing:border-box}
body {font-family: Verdana,sans-serif;}
.mySlides {display:none}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
height: 13px;
width: 13px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
.text {font-size: 11px}
}
</style>
<body><h2>Unser Angebot</h2>
<div class="slideshow-container">
<div align='center'>
<div class="mySlides fade">
<img src="images/champions.jpg" style="width:80%">
</div>
<div class="mySlides fade">
<img src="images/cordonbleu.jpg" style="width:80%">
</div>
<div class="mySlides fade">
<img src="images/tiramisu.jpg" style="width:80%">
</div>
<div class="mySlides fade">
<img src="images/burgerpommes.jpg" style="width:80%">
</div>
<div class="mySlides fade">
<img src="images/cordonbleu2.jpg" style="width:80%">
</div>
<div class="mySlides fade">
<img src="images/emmentaler.jpg" style="width:80%">
</div>
</div>
</div>
<br>
<div style="text-align:center">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
<script>
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex> slides.length) {slideIndex = 1}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
setTimeout(showSlides, 5000); // Change image every 2 seconds
}
</script>
</body>
</html>Mfg
