Question

为什么动态旋转木马指示器不随横幅旋转？

我正在现有的DIV结构周围注入一个股票引导转盘。指示符是可点击的，但是在点击指标时它们不会旋转或突出显示

下面的几行自定义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/

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

1 个答案: