twitter bootstrap dynamisches Karussell

Question

Ich möchte das Bootstrap-Karussell verwenden, um dynamisch durch Inhalte zu scrollen (zum Beispiel Suchergebnisse). Also, ich weiß nicht, wie viele Inhaltsseiten es gibt, und ich möchte keine weitere Seite holen, wenn der Benutzer nicht auf die nächste Schaltfläche klickt.

Ich schaute auf diese Frage: Carousel with dynamic content, aber ich glaube nicht, die Antwort gilt, weil es scheint, laden alle Inhalte (Bilder in diesem Fall) von einem DB-Server-Seite und gibt alles als statischen Inhalt zurück.

Meine beste Schätzung ist, das Klickereignis beim Drücken der Taste abzufangen, den Ajax für die nächste Seite der Suchergebnisse aufzurufen, die Seite dynamisch zu aktualisieren, wenn der Ajaxaufruf zurückkehrt, und dann ein Diaereignis für das Karussell zu generieren. Aber nichts davon wird auf den Bootstrap-Seiten wirklich diskutiert oder dokumentiert. Irgendwelche Ideen willkommen.

Answer 1

Wenn Sie (oder jemand anderes) ist nach wie vor für eine Lösung auf diese suchen, werde ich die Lösung, die ich für das Laden von Inhalten über AJAX in die Bootstrap-Karussell ..

Die Lösung erwies sich ein wenig sein entdeckt teilen schwierig, da es keine Möglichkeit gibt, den aktuellen Schlitten des Karussells einfach zu bestimmen. Bei einigen Datenattributen konnte ich das .slid Ereignis behandeln (wie Sie vorgeschlagen) und dann Inhalte aus einer anderen URL geladen mit 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); 
}); 

Demo on Bootply