Ist es möglich, eine Schleifenanimation mit setTimeout zu setzen?

Question

Ich versuche, einen Slider von Grund auf neu zu machen, ich weiß, dass es Plugins dafür gibt, aber ich möchte die Logik dahinter verstehen, deshalb baue ich es von Grund auf, ich habe die meisten Teile bekommen runter bis auf den Teil, wo ich möchte, dass es eine Schleife macht, sobald es die letzte Folie erreicht.

hier ist ein Stift meiner Arbeit bisher https://codepen.io/alexyap/pen/zwoRMy

$(document).ready(function(){ 

function slide() { 
setTimeout(function(){ 
    $("#container").addClass("slide-left1") 
}, 3000); 

setTimeout(function(){ 
    $("#container").addClass("slide-left2") 
}, 9000); 

} 

slide(); 

, was ich zu tun bin auf der Suche ist eine Art Schleife machen vielleicht mit meiner SetTimeout Funktionen, wie ich jede Folie soll noch nicht alles tun, bis etwa ein paar Sekunden nach dem Laden der Seiten und wieder für ein paar Sekunden auf den entsprechenden Folien zu pausieren, so dass die Besucher Zeit zum Lesen von Inhalten, die auf der Folie ist, jede Hilfe wird geschätzt, danke im Voraus

Answer 1

Versuchen Sie dies:

$(document).ready(function(){ 
 
    
 
    function slide() { 
 
    setTimeout(function(){ 
 
     $("#container").removeClass("slide-left3"); 
 
     $("#container").addClass("slide-left1"); 
 
    }, 2000); 
 

 
    setTimeout(function(){ 
 
     $("#container").removeClass("slide-left1"); 
 
     $("#container").addClass("slide-left2"); 
 
    }, 4000); 
 
    
 
    setTimeout(function(){ 
 
    $("#container").removeClass("slide-left2"); 
 
    $("#container").addClass("slide-left3"); 
 
     slide(); 
 
    }, 6000); 
 
    } 
 
    
 
    slide();   
 
})

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
body { 
 
    width: 100vw; 
 
    overflow-x: hidden; 
 
} 
 

 
#container { 
 
    width: 300vw; 
 
    background: #000; 
 
    height: 100vh; 
 
    position: relative; 
 
    left: 0; 
 
    transition: .9s ease; 
 
} 
 

 
#slide1 { 
 
    background: red; 
 
    height: 100vh; 
 
    width: 100vw; 
 
    left: 0; 
 
    top: 0; 
 
    position: absolute; 
 
    transition: .9s ease; 
 
} 
 

 
#slide2 { 
 
    background: yellow; 
 
    height: 100vh; 
 
    width: 100vw; 
 
    position: absolute; 
 
    left: 100vw; 
 
    top: 0; 
 
    transition: .9s ease; 
 
} 
 

 
#slide3 { 
 
    background: blue; 
 
    height: 100vh; 
 
    width: 100vw; 
 
    position: absolute; 
 
    left: 200vw; 
 
    top: 0; 
 
    transition: .9s ease; 
 
} 
 

 
.slide-left1 { 
 
    left: 0 !important; 
 
} 
 

 
.slide-left2 { 
 
    left: -100% !important; 
 
} 
 

 
.slide-left3 { 
 
    left: -200% !important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="container"> 
 
    <div id="slide1"> 
 
    </div> 
 

 
    <div id="slide2"> 
 
    </div> 
 

 
    <div id="slide3"> 
 
    </div> 
 
</div>