Dynamische Karussellanzeigen für Banner Rotator

Question

Warum drehen sich die dynamischen Karussellanzeigen nicht mit den Bannern?

Ich injiziere ein Bootstrap-Karussell um eine bestehende DIV-Struktur. Die Indikatoren sind anklickbar, aber sie drehen sich nicht oder markieren, wenn die Indikatoren

DEMO

Die wenigen Zeilen von benutzerdefinierten Jquery unten finden .carousel-inner angeklickt werden, die die DIV Verhüllung und ein Karussell Anzeige anhängen für jeden Artikel innerhalb der geordneten Liste.

$(".carousel-inner div.item").each(function(i) { 
      $('.carousel-indicators').append("<li data-target='#carousel-example-generic' data-slide-to='' class=''></li>"); 
    }); 

Schließlich wird die benutzerdefinierte Jquery jedes Listenelement finden und data-slide-to mit einer ganzen Zahl befestigen. Ich weiß jedoch nicht, warum die Indikatoren nicht mit den Bannern rotieren.

$("ol.carousel-indicators li").attr("data-slide-to", function(i, attr) { 
      $("ol.carousel-indicators li").first().addClass('active'); 
      return attr + (i + 0) 
     }); 

Hier ist der Full-Custom-jquery, die die Indikatoren dynamisch baut:

$(document).ready(function(){ 
    $(".modAcTitle.modAcActive, .ac_expand").remove() // kill this, its not needed. 
    $(".modAcContent").unwrap(); //good 
    $(".modAcContent").addClass('item').removeClass('modAcContent'); //fixes items 
    $(".item").first().addClass('active'); 
    $(".carousel-inner div.item").each(function(i) { 
      $('.carousel-indicators').append("<li data-target='#carousel-example-generic' data-slide-to='' class=''></li>"); 
    }); 
    $("ol.carousel-indicators li").attr("data-slide-to", function(i, attr) { // give each section its own id 
     $("ol.carousel-indicators li").first().addClass('active'); 
     return attr + (i + 0) 
    }); 
}); 

Answer 1

Ich denke, sollte ich es gerade gegoogelt, weil dies die Lösung ist.

Quelle: https://coderwall.com/p/4ulwtg/auto-generate-twitter-bootstap-carousel-indicators

<!-- auto-generate carousel indicator html --> 
var myCarousel = $(".carousel"); 
myCarousel.append("<ol class='carousel-indicators'></ol>"); 
var indicators = $(".carousel-indicators"); 
myCarousel.find(".carousel-inner").children(".item").each(function(index) { 
    (index === 0) ? 
    indicators.append("<li data-target='#myCarousel' data-slide-to='"+index+"' class='active'></li>") : 
    indicators.append("<li data-target='#myCarousel' data-slide-to='"+index+"'></li>"); 
});  

<!-- then call carousel --> 
$('.carousel').carousel(); 

Demo: http://output.jsbin.com/sitayikuko/