How to make a Bootstrap tabs "auto play"

Question

I'de like to display my tabs with an auto play and not a "click to show".

I use Bootstrap 3.3.5. I checked the doc on get bootstrap but it looks there's nothing about it.

Here is the live version (Check at the bottom of the page)

Here is the HTML :

<div class="row accordeon">
                <div class="blue">
                    <ul class="nav nav-tabs" id="myTab">
                      <li class="active"><a href="#deposer">1 - Déposez un projet appel d’offre et recevez en moyenne 10 devis</a></li>
                      <li><a href="#comparer">2 - Comparez les devis et négociez librement</a></li>
                      <li><a href="#choisir">3 - Choississez le prestataire que vous voulez, quand vous voulez</a></li>
                      <li><a href="#payer">4 - Payez le prestataire par le moyen de votre choix</a></li>
                      <li><a href="#evaluer">5 - Evaluez le prestataire sur Codeur.com</a></li>
                    </ul>
                </div>
                <div class="gray">
                    <div class="tab-content">
                      <div class="tab-pane active" id="deposer">
                        <h4 class="text-left">1 - Déposez un projet appel d’offre et recevez en moyenne 10 devis</h4>
                        <p>Sans même vous inscrire, vous publiez votre projet. Il correspond à un appel d'offres auquel les prestataires vont répondre. C'est gratuit et l'inscription se fait automatiquement et simultanément.</p>
                        <p>Une fois le projet publié sur Codeur, les prestataires concernés sont avertis. Vous n'avez rien d'autre à faire. Vous recevez rapidement des devis gratuits qui seront classés sous la description de votre projet.</p>
                        <p>En savoir plus sur le dépot de projet :</p>
                        <ul class="unstyled">
                            <li><a class="shake" href="#">Comment créer mon projet ?<i class="icon-arrow"></i></a></li>
                            <li><a class="shake" href="#">Comment bien décrire mon projet ?<i class="icon-arrow"></i></a></li>
                        </ul>
                      </div>
                      <div class="tab-pane" id="comparer">
                        <h4 class="text-left">2 - Comparez les devis et négociez librement</h4>
                        <p>Comparez les devis et discutez avec leurs prestataires par messagerie privée, par messagerie instantanée ou par téléphone (si vous le souhaitez). Vous pouvez aussi modifier votre projet et donner des précisions aux prestataires. Vous négociez librement et mettez les prestataires en concurrence pour obtenir les meilleurs prix et délais et les meilleures prestations.</p>
                        <p>En savoir plus sur :</p>
                        <ul class="unstyled">
                            <li><a class="shake" href="#">Comment inviter un prestataire à faire une offre sur mon projet ?<i class="icon-arrow"></i></a></li>
                            <li><a class="shake" href="#">Comment utiliser la messagerie ?<i class="icon-arrow"></i></a></li>
                        </ul>
                      </div>
                      <div class="tab-pane" id="choisir">
                        <h4 class="text-left">3 - Choississez le prestataire que vous voulez, quand vous voulez</h4>
                        <p>C'est vous qui décidez quand et si vous sélectionnez un prestataire. Vous sélectionnez la personne que vous voulez. C'est très simple, il vous suffit de le sélectionner à partir de la fiche de votre projet.</p>
                        <p>Choisir un prestataire sur Codeur vous permettra de l'évaluer à l'issue de sa prestation. Vous pouvez aussi demander, avant de commencer le projet, de signer un devis en bonne et due forme.</p>
                        <ul class="unstyled">
                            <li><a class="shake" href="#">Comment choisir un prestataire pour réaliser mon projet ?<i class="icon-arrow"></i></a></li>
                            <li><a class="shake" href="#">Pourquoi attribuer un projet sur Codeur.com est il plus sûr ?<i class="icon-arrow"></i></a></li>
                        </ul>
                      </div>
                      <div class="tab-pane" id="payer">
                        <h4>4 - Payez le prestataire par le moyen de votre choix</h4>
                        <p>C'est vous qui décidez comment vous réglez votre prestataire. Vous discutez avec lui du moyen de paiement qui vous convient à tous les deux. Pour plus de sécurité, vous pouvez bloquer le paiement sur <a href="#">Codeur Tasks</a> en début de projet, et vous libérez le paiement par étape : à chaque étape réalisée correspond un paiement. Cela permet d'éviter la plupart des litiges.</p>
                      </div>
                      <div class="tab-pane" id="evaluer">
                        <h4>5 - Evaluez le prestataire sur Codeur.com</h4>
                        <p>Dès la fin du projet, vous pouvez évaluer le prestataire. Votre évaluation sera publiée sur le site et si elle est positive, aidera le prestataire à trouver de nouveaux projets. Le prestataire pourra également vous évaluer et ainsi renforcer votre réputation sur Codeur.com pour trouver un prestataire lors de la publication d'un prochain projet.</p>
                      </div>
                    </div>
                </div>
            </div>

Here is the JS :

<!-- Tabs -->
<script>
  $('#myTab a').click(function (e) {
  e.preventDefault();
  $(this).tab('show');
})
</script>

Answer 1

$(function(){
var tabs = $('#myTab a');
    var counter = 0;
    window.setInterval(activateTab, 5000);
    function activateTab(){
      // remove active class from all the tabs
       tabs.removeClass('active');
       var currentLink = tabs[counter];

       $('.tab-pane').removeClass('.active').hide();
       currentLink.addClass('active');
       $(currentLink.attr('href')).addClass('active').show();
       if(counter  < tabs.length)
         counter= counter + 1;
       else 
         counter = 0;
    }
});