https://pmparchitekten.de/indexSlider.js

1/*=================================================
2	project: Homepage pmp-Architekten
3	author: David Probst
4	focus: index diashow animation
5	==================================================*/
6
7inSlArray = new Array();
8inSlPreloadArray = new Array();
9var inSlNumberOfImages = 12;
10var inSlImgNr = 2;
11var inSlImgDuration = 12500;
12
13//preload Images and start intervall
14function inSlStart() {
15  for (i = 2; i <= inSlNumberOfImages; i++) {
16    inSlPreloadArray[i] = new Image();
17    inSlPreloadArray[i].src = "indexSlider/bild" + i + ".jpg";
18  }
19  inSlArray[1] = document.getElementsByClassName("inSlFirstImg")[0]; //get first img from htmlCode
20  indexSliderLoop = setInterval("inSlTriggerSlide()", inSlImgDuration);
21}
22function inSlTriggerSlide() {
23  //create new slider div and assign css class and background-image
24  inSlArray[inSlImgNr] = document.createElement("div");
25  inSlArray[inSlImgNr].className = "inSlImgs";
26  inSlArray[inSlImgNr].style.backgroundImage =
27    "url('indexSlider/bild" + inSlImgNr + ".jpg')";
28  $("#inSlWrapper").append(inSlArray[inSlImgNr]);
29
30  //slide out old div and slide in new div
31  window.setTimeout(function () {
32    inSlArray[inSlImgNr].style.transform = "none";
33    if (inSlImgNr != 1) {
34      inSlArray[inSlImgNr - 1].style.transform = "translate(-100%)";
35    } else if ((inSlImgNr = 1)) {
36      inSlArray[inSlNumberOfImages].style.transform = "translate(-100%)";
37    }
38    inSlImgNr++;
39    if (inSlImgNr > inSlNumberOfImages) {
40      inSlImgNr = 1;
41    }
42  }, 100);
43}