twitter bootstrap dynamique carrousel

J'aimerais utiliser bootstrap carrousel dynamiquement faire défiler le contenu (par exemple, les résultats de la recherche). Alors, je ne sais pas combien de pages de contenu, il y aura, et je ne veux pas aller chercher une page ultérieure, sauf si l'utilisateur clique sur le bouton suivant.

J'ai regardé cette question: Carrousel avec du contenu dynamique, mais je ne pense pas que la réponse s'applique parce qu'il semble suggérer le chargement de tous les contenus (images, dans ce cas) à partir d'un serveur de bases de côté et retourne tout comme le contenu statique.

Ma meilleure supposition est d'intercepter l'événement click sur le bouton de la presse, de faire l'appel ajax pour la prochaine page de résultats de recherche, mettre à jour dynamiquement la page lors de l'appel ajax retourne, puis générer une diapositive événement pour le carrousel. Mais rien de cela n'est vraiment discuté ou documenté sur le bootstrap pages. Toutes les idées bienvenues.

OriginalL'auteur Kevin | 2013-02-19

  1. 16

    Si vous (ou quelqu'un d'autre) est toujours à la recherche d'une solution sur ce, je vais partager la solution que j'ai découvert pour le chargement de contenu via AJAX dans le Bootstrap Carrousel..

    La solution est avéré être un peu difficile car il n'existe aucun moyen de déterminer facilement la diapositive en cours du carrousel. Avec certains attributs de données, j'ai été en mesure de gérer le .slid événement (comme vous l'avez suggéré) et puis charger le contenu d'un autre url à l'aide de jQuery $.load()..

    $('#myCarousel').carousel({
  interval:false //remove interval for manual sliding
});

//when the carousel slides, load the ajax content
$('#myCarousel').on('slid', function (e) {

    //get index of currently active item
    var idx = $('#myCarousel .item.active').index();
    var url = $('.item.active').data('url');

    //ajax load from data-url
    $('.item').html("wait...");
    $('.item').load(url,function(result){
        $('#myCarousel').carousel(idx);  
    });

});

//load first slide
$('[data-slide-number=0]').load($('[data-slide-number=0]').data('url'),function(result){    
    $('#myCarousel').carousel(0);
});

    Démo sur Bootply

    Sauf si je suis en manque de quelque chose, cette solution nécessite d'abord de charger toutes les diapositives quoique vide?

    OriginalL'auteur Zim