• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Slideshow verschwindet immer wieder

martinatina

Neues Mitglied
Hallo! Ich würde gerne folgende Slideshow in meine Website einbauen:

https://codepen.io/mattfried/pen/LJNXVz

Ich habe das alles so eingegeben wie es da steht, nun hab ich das Problem, dass die Slideshow nach ca 2sek komplett von der Website verschwindet und es nur noch weiß an der Stelle bleibt...
Ich habe euch hier mal den Code eingefügt
Zudem bekomme ich bei meiner JS Datei folgende Fehlermeldungen:


Screenshot (416).png


Code:
HTML:



<!DOCTYPE html>
<html lang="de">

<head>
    <meta charset="utf-8">
    <title>x</title>
   <script src="app.js"></script>
    <link rel="stylesheet" href="css/style.css">
    <link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@200;300;400;500;600;700&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400&display=swap" rel="stylesheet">
</head>


<body>
    <header class="header">

        <p class="NAME"> <a class="name" href="index.html">XXX </a></p>


        <nav>

            <ul>

                <li><a href="about.html">ÜBER MICH</a></li>
                <li><a href="projekte.html">PROJEKTE</a></li>

                <li><a href="kontakt.html">KONTAKT</a></li>
            </ul>
        </nav>


    </header>

    <div class="wrapper">

        <h1>Überschrift</h1>
        <h2>Untertext</h2>
        
<div class="slideshowContainer">
 
<!-- Replace the image 'src' with the images in your project.
Javascript is set up so that you can add as many images as you like, but make sure that you match the number of 'circle' span elements (below) to the number of images -->
  <img class="imageSlides" src="Bilder/x.jpg" alt="x">
  <img class="imageSlides" src="Bilder/x.jpg" alt="x">
  <img class="imageSlides" src="Bilder/x.jpg" alt="x">
 
<!-- I would recommend to replace these 'span' elements with 'img' files
for each the left and right arrow that fits your project, and size accordingly.
I've shown 'span' elements because I didn't want to upload files. -->
  <span id ="leftArrow" class="slideshowArrow">&#8249;</span>
  <span id ="rightArrow" class="slideshowArrow">&#8250;</span>
 
  <div class="slideshowCircles">
<!-- Filled 'dot' class is set to first image in slideshow, and then via Javascript the filled 'dot' class follows the current image.
Make sure you match the number of these 'circle' span elements to the number of images in your slideshow. -->
    <span class="circle dot"></span>
    <span class="circle"></span>
    <span class="circle"></span>
  </div>
 
</div>


    </div>
</body>

</html>


Code:
CSS:




.slideshowContainer {
  position: relative;
  overflow: hidden;
  margin: 50px 0 75px;
  width: 100%;
  height: 500px;
}

.imageSlides {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  z-index: -1;
}

/* add 'visible' class via Javascript */
.visible {
  opacity: 1;
}

.slideshowArrow {
  font-size: 7em;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: opacity 0.2s ease-in-out;
}

.slideshowArrow:hover {
  opacity: 0.75;
}

#leftArrow {
  position: absolute;
  left: 4%;
  top: 50%;
  transform: translate(-50%, -50%);
}

#rightArrow {
  position: absolute;
  right: 4%;
  top: 50%;
  transform: translate(50%, -50%);
}

.slideshowCircles {
  position: absolute;
  bottom: 2%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.circle {
  display: inline-block;
  margin-left: 3px;
  margin-right: 3px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: solid 2px rgba(255, 255, 255, 0.5);
  transition: 1s ease-in-out;
}

.dot {
  background-color: rgba(255, 255, 255, 0.7);
  border: solid 2px rgba(255, 255, 255, 0.5);
}

Code:
JS:

// IMAGE SLIDES & CIRCLES ARRAYS, & COUNTER
var imageSlides = document.getElementsByClassName('imageSlides');
var circles = document.getElementsByClassName('circle');
var leftArrow = document.getElementById('leftArrow');
var rightArrow = document.getElementById('rightArrow');
var counter = 0;

// HIDE ALL IMAGES FUNCTION
function hideImages() {
  for (var i = 0; i < imageSlides.length; i++) {
    imageSlides[i].classList.remove('visible');
  }
}

// REMOVE ALL DOTS FUNCTION
function removeDots() {
  for (var i = 0; i < imageSlides.length; i++) {
    circles[i].classList.remove('dot');
  }
}

// SINGLE IMAGE LOOP/CIRCLES FUNCTION
function imageLoop() {
  var currentImage = imageSlides[counter];
  var currentDot = circles[counter];
  currentImage.classList.add('visible');
  removeDots();
  currentDot.classList.add('dot');
  counter++;
}

// LEFT & RIGHT ARROW FUNCTION & CLICK EVENT LISTENERS
function arrowClick(e) {
  var target = e.target;
  if (target == leftArrow) {
    clearInterval(imageSlideshowInterval);
    hideImages();
    removeDots();
    if (counter == 1) {
      counter = (imageSlides.length - 1);
      imageLoop();
      imageSlideshowInterval = setInterval(slideshow, 10000);
    } else {
      counter--;
      counter--;
      imageLoop();
      imageSlideshowInterval = setInterval(slideshow, 10000);
    }
  }
  else if (target == rightArrow) {
    clearInterval(imageSlideshowInterval);
    hideImages();
    removeDots();
    if (counter == imageSlides.length) {
      counter = 0;
      imageLoop();
      imageSlideshowInterval = setInterval(slideshow, 10000);
    } else {
      imageLoop();
      imageSlideshowInterval = setInterval(slideshow, 10000);
    }
  }
}

leftArrow.addEventListener('click', arrowClick);
rightArrow.addEventListener('click', arrowClick);


// IMAGE SLIDE FUNCTION
function slideshow() {
  if (counter < imageSlides.length) {
    imageLoop();
  } else {
    counter = 0;
    hideImages();
    imageLoop();
  }
}

// SHOW FIRST IMAGE, & THEN SET & CALL SLIDE INTERVAL
setTimeout(slideshow, 1000);
var imageSlideshowInterval = setInterval(slideshow, 10000);

Vielleicht kann mir ja wer weiterhelfen :D
Java ist meine absolute Schwäche
 
Werbung:
Macht nichts, denn Java benutzt du ja gar nicht, sondern JavaScript.

Verschiebe diese Zeile
HTML:
<script src="app.js"></script>
vor die Zeile mit </body>



Jetzt funktioniert das Ganze! Nur braucht es ca 5 Sekunden bis alles auftaucht :/ Kann ich das irgendwie verkürzen?
Ich wusste nicht das es einen Unterschied zwischen Java und JavaScript gibto_O:D Hatte ohnehin vor, mich in dem Bereich weiterzubilden, da wir das in der Schule leider nicht durchgenommen haben, muss jetzt aber eine Bewerbung erstellen um einen Job zu finden und will dazu eine Website erstellen :smile: nur leider ist das gar nicht so einfach, nur mit HTML und CSS :D
 
Werbung:
Zurück
Oben