slideshow


#1
hallo habe inzwischen noch ein weiters kleines problemchen und zwar habe ich mir eine slideshow rausgesucht und eingebunden allerdings zeig er mir beim laden der seite das bzw die bilder nicht sondern erst wenn ich auf einen der pfeile klicke.

zu sehen hier
http://sydneysina.bplaced.net/

folgendes habe ich eingefügt

CSS:
* {box-sizing: border-box}
.mySlides {display: none}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
  max-width: 1024px;
  position: relative;
  margin: auto;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* 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 {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  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) {
  .prev, .next,.text {font-size: 11px}
}
Java:
</style>

<script>
var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {slideIndex = 1}   
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none"; 
  }
  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";
}
</script>
HTML:
<div class="slideshow-container">

            <div class="mySlides fade">
                 <img src="images/Wechselbilder/001.jpg" style="width:100%">
                  <div class="text">Caption Text</div>
            </div>

            <div class="mySlides fade">
                  <img src="images/Wechselbilder/002.jpg" style="width:100%">
                  <div class="text">Caption Two</div>
            </div>

            <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
            <a class="next" onclick="plusSlides(1)">&#10095;</a>

        </div>
zusätzlich würde ich es klasse finden wenn mir jemanden sagen könnte wie ich einen zeitinterval einfügen könnte. ggfs mir den java code umschreibt da dort mein wissen definitiv aufhört.

schon jetzt vielen dank für eure hilfe, eure sydney sina
 

Sempervivum

Erfahrenes Mitglied
#2
Die Console verrät, warum es nicht funktioniert:
Uncaught TypeError: Cannot read property 'style' of undefined
at showSlides ((index):457)
at (index):435
Das Javascript der Slideshow steht vor dem HTML, so dass die Elemente beim ersten Aufruf noch nicht existieren. Lösung indem Du das Javascript an das Ende des Body legst, vor das schließende </body>.
 

Sempervivum

Erfahrenes Mitglied
#3
Für das Zeitintervall gibt es die Funktion setInterval(). Dies sollte es tun:
Code:
<script>
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
  showSlides(slideIndex += n);
}
function currentSlide(n) {
  showSlides(slideIndex = n);
}
function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {slideIndex = 1} 
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
  }
  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";
}
setInterval(function() {
    plusSlides(1);
  }, 5000);
</script>
 

Sempervivum

Erfahrenes Mitglied
#5
Der Grund ist jetzt, dass die dots im HTML nicht existieren. Deaktiviert man die betr. Zeile, funktioniert es:
Code:
    <script>
        var slideIndex = 1;
        showSlides(slideIndex);

        function plusSlides(n) {
            showSlides(slideIndex += n);
        }

        function currentSlide(n) {
            showSlides(slideIndex = n);
        }

        function showSlides(n) {
            var i;
            var slides = document.getElementsByClassName("mySlides");
            var dots = document.getElementsByClassName("dot");
            if (n > slides.length) { slideIndex = 1 }
            if (n < 1) { slideIndex = slides.length }
            for (i = 0; i < slides.length; i++) {
                slides[i].style.display = "none";
            }
            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";
        }
        setInterval(function () {
            plusSlides(1);
        }, 1000);
    </script>
 
#6
hm....
habe die dots wie folgt eingefügt

HTML:
        <div class="slideshow-container">

            <div class="mySlides fade">
                 <img src="images/Wechselbilder/001.jpg" style="width:100%">
                  <div class="text"><h5>Die Spedition<br>der du trauen kannst</h5>
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                </div>
            </div>

            <div class="mySlides fade">
                  <img src="images/Wechselbilder/002.jpg" style="width:100%">
                  <div class="text1"><h5>Größe und Gewicht<br>sind nichts</h5>
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                </div>
            </div>

            <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
            <a class="next" onclick="plusSlides(1)">&#10095;</a>

        </div>
<div style="text-align:center">
  <span class="dot" onclick="currentSlide(1)"></span>
  <span class="dot" onclick="currentSlide(2)"></span>
</div>
leider wieder ohne erfolg und mitlerweile ist die ms auf 8 runter
 

Sempervivum

Erfahrenes Mitglied
#7
Ich habe deine Seite herunter geladen und bei mir funktioniert es einwandfrei nachdem ich die Dots eingefügt und das JS dafür wieder aktiviert habe. Wenn es bei dir nicht geht, dann lade es doch mal hoch, damit man es untersuchen kann.