Archiv-Modus von Basti1012 Lösungspage

Guten Morgen, ich bin jQuery Anfänger und habe eine Frage zu einem kleinen jQuery Code, der einen Bildaustausch vornehmen soll: Im Array images werden die 3 Bilder gelistet. Eine Schleife soll alle 5 Sek. die Hintergrundbilder nacheinander durchblenden und dann wieder von vorn anfangen. Das klappt auch für eine gewisse Zeit, nur kommt irgendwann im CSS background-image: undefined. Wo liegt hier der Fehler?

Code

                                    
                                <!doctype html>
<html>

<head>
  <style>
    div {
      background: url("https://basti1012.bplaced.net/image/11.png");
      background-size: cover;
      width: 300px;
      height: 400px;
    }
  </style>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.2/jquery.min.js"></script>
</head>

<body>
  <div class="teaser"></div>
  <script>
    jQuery(document).ready(function() {
      var i = 0;
      var images = [
        "https://basti1012.bplaced.net/image/11.png",
        "https://basti1012.bplaced.net/image/12.png",
        "https://basti1012.bplaced.net/image/13.png"
      ];
      var image = $(".teaser");
      setInterval(function() {
        image.fadeOut(100, function() {
          image.css("background-image", "url(" + images[i] + ")");
          image.fadeIn(100);
        });
        if (i == 2) {
          i = 0;
        } else {
          i++;
        }
      }, 5000);
    });
  </script>
</body>

</html>

basti1012.bplaced.net

jQuery Automatischer Bildwechsel Hintergrundbilder 1

Code