Wie programmiere nächste div automatisch nach 5 Sekunden

Question

Ich entwickle eine neue Website und ich brauche es, Frame nach 7 Sekunden zu ändern. Meine Idee ist der erste Frame, nach 7 Sekunden Frame 2, und dann nach 7 Sekunden der Frame 3, der die Schaltfläche hat, um fortzufahren.

Kann mir jemand dabei helfen?

Der Code, den ich bisher habe, ist:

<header id="home"> 
<div id="home-slider" class="carousel slide carousel-fade" data-ride="carousel"> 
    <div class="carousel-inner"> 
    <div class="item active" style="background-image: url(images/slider/1.jpg)"> 
     <div class="caption"> 
     <h1 class="animated fadeInLeftBig">Bem Vindo 
     </div> 
    </div> 
    <div class="item" style="background-image: url(images/slider/2.jpg)"> 
     <div class="caption" 
     <h1 class="animated fadeInLeftBig">NÓS SOMOS </h1> 
     </div> 
    </div> 
    <div class="item" style="background-image: url(images/slider/3.jpg)"> 
     <div class="caption"> 
     <h1 class="animated fadeInLeftBig"> <span>The Outsider Marketing Company</span></h1> 
     <p class="animated fadeInRightBig">MARKETING - COMUNICAÇÃO - WEBDESIGN</p> 
     <a data-scroll class="btn btn-start animated fadeInUpBig" href="#services">PROSSEGUIR</a> 
     </div> 
    </div> 
    </div> 
    <a class="left-control" href="#home-slider" data-slide="prev"><i class="fa fa-angle-left"></i></a> 
    <a class="right-control" href="#home-slider" data-slide="next"><i class="fa fa-angle-right"></i></a> 

    <a id="tohash" href="#services"><i class="fa fa-angle-down"></i></a> 

Answer 1

Ich denke, Sie durch jQuery tun wollen, müssen Sie Elementklasse mit Regel display: none und aktiv mit display:block haben, so versuchen Sie mit diesem Code:

$(document).ready(function(){ 
    var currentItem = 0, 
    items  = $('.item'); 

    setTimeout(function(){ 
     items.removeClass('active'); 
     items[currentItem].addClass('active'); 
     if(currentItem == items.lenght - 1) 
      currentItem = 0; 
    }, 7000) 

});