Question

我在示例中有bootstrap轮播，因为你看到了我不想在html中添加指标我只想添加js来为每个轮播工作，我在互联网上找到了一个功能并且它的工作非常好但它的确如此只为一个旋转木马工作

我有两个轮播#carousel-1和#carousel-2，但我的功能只适用于#carousel-1。我知道如果我给同一个班级我的问题将会解决，但轮播ID和{{1指标必须相同。

如何使用js自动添加li.data-target以查看其指标？

carousel-indicators

  var myCarousel = $("#carousel-1");
  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='#carousel-1' data-slide-to='"+index+"' class='active'></li>") : 
      indicators.append("<li data-target='#carousel-1' data-slide-to='"+index+"'></li>");
  });     

$('.carousel').carousel();

.carousel{
  margin:20px;
}

Answer 1

你可以通过这种方式使它变得动态。此解决方案适用于任何数量的轮播，无需任何更改：）

$(document).ready(function(){  
    var myCarousels = $(".carousel");
    myCarousels.each(function( index, element  ) {
        var myCarousel = $("#"+$(element).attr('id')); 
        myCarousel.append("<ol class='carousel-indicators'></ol>");
        var indicators = $("#"+$(element).attr('id') + " .carousel-indicators"); 
        $("#"+$(element).attr('id') +" .carousel-inner").children(".item").each(function(index) {
            console.log(index);
            (index === 0) ? 
            indicators.append("<li data-target='#"+$(element).attr('id')+"' data-slide-to='"+index+"' class='active'></li>") : 
            indicators.append("<li data-target='#"+$(element).attr('id')+"' data-slide-to='"+index+"'></li>");
        });
    });
});

以下是工作示例：https://jsfiddle.net/bhumi/98L5Lu4p/1/

Answer 2

function appendIndicator(carousel)
{
  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='"+ carousel +"' data-slide-to='"+index+"' class='active'></li>") : 
        indicators.append("<li data-target='" + carousel + "' data-slide-to='"+index+"'></li>");
    });     
}

$('.carousel').carousel();

appendIndicator('#carousel-1');
appendIndicator('#carousel-2');

Demo JSFiddle

自动添加指标到bootstrap轮播

2 个答案: