javascript - 横幅旋转器的动态轮播指示器

Question

为什么动态轮播指示器不随横幅旋转？

我正在围绕现有 DIV 结构注入(inject)库存 Bootstrap 轮播。指示器可单击，但单击指示器时它们不会旋转或突出显示

<强> DEMO

下面的几行自定义 jquery 将找到包装 DIV 的 .carousel-inner 并为有序列表中的每个项目附加一个轮播指示符。

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

最后，自定义 jquery 将找到每个列表项并附加一个整数 data-slide-to 。但是，我不知道为什么指示器没有随着横幅旋转。

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

这是动态构建指标的完整自定义 jquery:

$(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

我想我应该用谷歌搜索它，因为这就是解决方案。

来源: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();

演示:http://output.jsbin.com/sitayikuko/