js, um einen 3D-Karusselleffekt zu erzielen

 *{
            Polsterung: 0;
            Rand: 0;
        }
        .Kasten{
            Position: relativ;
            Breite: 100 %;
            Höhe: 100%;
            oben: 200px;
            Rand: automatisch;
        }
        .warpper{
            Position: absolut;
            Breite: 100 %;
            Höhe: 100%;
            Perspektive: 800px;
            Transformationsstil: 3D beibehalten;
 
        }
        .box .warpper img{
            Breite: 300px;
            Höhe: 200px;
            schweben: links;
            Position: absolut;
            oben: 0;
            links: 0;
            unten: 0;
            rechts: 0;
            Rand: automatisch;
            Rahmenradius: 8px;
            Übergang: alle 1en langsam rein-raus;
        }
        .btn{
            Position: relativ;
            oben: 50 %;
            links: 50%; 
            Breite: 1200px;
            transformieren: übersetzen(-50 %, -20px);
        }
        .btn .links,.btn .rechts{
            Höhe: 50px;
            Breite: 50px;
            Schriftgröße: 30px;
            Textausrichtung: zentriert;
            Zeilenhöhe: 50px;
            Hintergrundfarbe: schwarz;
            Farbe: weiß;
            Randradius: 15 %;
            Position: absolut;
        }
        .btn .links{
            links: 0;
        }
        .btn .rechts{
            rechts: 0;
        }
        .btn span:hover{
            Hintergrundfarbe: rgba(0,0,0,0,8);
        }
        .Punkte{
            Position: absolut;
            links: 50%;
            unten: 10px;
            transformieren: übersetzen (-50 %, 200 Pixel);
            Höhe: 14px;
        }
        .Punkte li{
            Anzeige: Inline-Block;
            Listenstil: keiner;
            Breite: 14px;
            Höhe: 14px;
            Rand: 1px durchgezogen #000;
            Randradius: 50 %;
            Hintergrundfarbe: weiß;
            Rand: 0,5px;
        }
        .Punkte .aktuell{
            Hintergrundfarbe: rot;
        }

<div Klasse="Box">
        <div Klasse="Warpper">
            <img src="./Inspiration 3.jpg" alt="">
            <img src="./Inspirational2.jpg" alt="">
            <img src="./2f1d.jpg" alt="">
            <img src="./aimg.jpg" alt="">
            <img src="./peg.jpg" alt="">
        </div>
        <div Klasse="btn" id="btn">
            <span class="left"> < </span>
            <span class="right"> > </span>
        </div>
        <ul Klasse="Punkte">
        </ul>
    </div>
<script src="swarp.js"></script>

var imgs = document.querySelectorAll("img")
var btns = document.querySelectorAll("span")
var ul = document.querySelector(".Punkte")
var lis = document.getElementsByTagName("li")
Var-Zeitgeber
var current = 0 // Index des aktuell wiedergegebenen Bildes var flag = true // Klick-Anti-Shake-Drosselung var len = imgs.length // Bildlänge function loadFirst() {
    imgMove()
    binden()
    btnClick()
    getDot()
    Punkt anzeigen()
    autoPlay()
}
ladenZuerst()
Funktion imgMove() {
    var mlen = Math.floor(Länge / 2)
    für (var i = 0; i < mlen; i++) {
        // Aktueller Indexwert des Wiedergabebildes var rimg = current + 1 + i
        var limg = Länge + aktuell - 1 - i
        wenn (rimg >= len) {
            rimg -= Länge
        }
        wenn (limg >= len) {
            limg -= Länge
        }
        imgs[limg].style.transform = `translateX(${150 * (i + 1)}px) translateZ(${200 - i * 100}px) rotateY(-30deg)`
        imgs[rimg].style.transform = `translateX(${-150 * (i + 1)}px) translateZ(${200 - i * 100}px) rotateY(30deg)`
    }
    imgs[current].style.transform = ``translateZ(300px)``
}
// Automatische Wiedergabefunktion function autoPlay() {
    Timer = Intervall festlegen(Funktion () {
        wenn (aktuell >= Länge - 1) {
            Strom = 0
        } anders {
            aktuell++
        }
        imgMove()
        autoLi()
    }, 3000)
}
// Klicken Sie auf das Bild, um die Funktion bind() { abzuspielen.
    für (lass i = 0; i < imgs.length; i++) {
        imgs[i].onclick = Funktion () {
            Strom = i
            imgMove()
            autoLi()
        }
        imgs[i].onmouseover = Funktion () {
            Intervall löschen(Timer)
        }
        imgs[i].onmouseout = Funktion () {
            autoPlay()
        }
    }
}
// Klicken Sie auf die linke und rechte Schaltfläche Funktion btnClick() {
    für (lass i = 0; i < btns.Länge; i++) {
        btns[i].onclick = Funktion () {
            // Verhindere verrücktes Klicken, wenn (!flag) {
                zurückkehren
            }
            Flagge = falsch
            wenn (i == 0) {
                // Zurück if (current <= 0) {
                    Strom = Länge - 1
                } anders {
                    aktuell--
                }
            } anders {
                //Weiter wenn (aktuell >= Länge - 1) {
                    Strom = 0
                } anders {
                    aktuell++
                }
            }
            setzeTimeout(Funktion () {
                Flagge = wahr
            }, 1000)
 
            imgMove()
            autoLi()
 
        }
        btns[i].onmouseenter = Funktion () {
            Intervall löschen(Timer)
        }
        btns[i].onmouseout = Funktion () {
            autoPlay()
        }
    }
}
// Punktfunktion getDot() {
    für (var i = 0; i < len; i++) {
        ul.innerHTML += `<li></li>`
    }
    lis[0].classList.add("aktuell")
}
Funktion zeigePunkt() {
    für (sei i = 0; i < len; i++) {
        lis[i].onclick = Funktion () {
            für (var j = 0; j < len; j++) {
                lis[j].classList.remove("aktuell")
            }
            diese.classList.add("aktuell")
            Strom = i
            imgMove()
        }
    }
}
Funktion autoLi() {
    für (var i = 0; i < len; i++) {
        wenn (i == aktuell) {
            lis[i].classList.add("aktuell")
        } anders {
            lis[i].classList.remove("aktuell")
        }
    }
}