自動添加指標到自舉輪播

我有自舉輪播在示例中，你可以看到，我不想在html中添加指標我只是想添加在js爲每個輪播和工作，我發現在互聯網上的功能和它的工作非常好，但它的工作只是一個旋轉木馬自動添加指標到自舉輪播

我有兩個轉盤#carousel-1和#carousel-2但我的函數的工作只是爲#carousel-1。我知道，如果我給同班我的問題將得到解決，但轉盤ID及指標li.data-target必須相同。

我怎樣才能自動添加carousel-indicators與js看他們的指標？

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; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> 
 
    <!-- Bootstrap --> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 

 
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> 
 
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
 
    <!--[if lt IE 9]> 
 
     <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> 
 
     <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
 
    <![endif]--> 
 
    </head> 
 
    <body> 
 
    <h1>SLİDER 1</h1> 
 

 
    <!-- SLIDER 1--> 
 
    <div id="carousel-1" class="carousel slide" data-ride="carousel"> 
 

 
    <div class="carousel-inner" role="listbox"> 
 
    <div class="item active"> 
 
     <img src="https://cdn.pixabay.com/photo/2016/12/26/02/13/bishan-1931390_960_720.jpg" alt="..."> 
 
    </div> 
 
    <div class="item"> 
 
     <img src="https://cdn.pixabay.com/photo/2016/12/26/15/34/simplicity-1932331_960_720.jpg" alt="..."> 
 
     <div class="carousel-caption"> 
 
     
 
     </div> 
 
    </div> 
 
    </div> 
 

 
    <a class="left carousel-control" href="#carousel-1" role="button" data-slide="prev"> 
 
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
 
    <span class="sr-only">Previous</span> 
 
    </a> 
 
    <a class="right carousel-control" href="#carousel-1" role="button" data-slide="next"> 
 
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
 
    <span class="sr-only">Next</span> 
 
    </a> 
 
</div> 
 
    <!-- SLIDER 1 END--> 
 
    
 
    <h1>SLİDER 2</h1> 
 
    
 
    <!-- SLIDER 2--> 
 
    <div id="carousel-2" class="carousel slide" data-ride="carousel"> 
 

 
    <div class="carousel-inner" role="listbox"> 
 
    <div class="item active"> 
 
     <img src="https://cdn.pixabay.com/photo/2016/12/26/02/13/bishan-1931390_960_720.jpg" alt="..."> 
 
    </div> 
 
    <div class="item"> 
 
     <img src="https://cdn.pixabay.com/photo/2016/12/26/15/34/simplicity-1932331_960_720.jpg" alt="..."> 
 
     <div class="carousel-caption"> 
 
     
 
     </div> 
 
    </div> 
 
    </div> 
 

 
    <a class="left carousel-control" href="#carousel-2" role="button" data-slide="prev"> 
 
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
 
    <span class="sr-only">Previous</span> 
 
    </a> 
 
    <a class="right carousel-control" href="#carousel-2" role="button" data-slide="next"> 
 
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
 
    <span class="sr-only">Next</span> 
 
    </a> 
 
</div> 
 
    <!-- SLIDER 2 END--> 
 
    
 
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
    <!-- Include all compiled plugins (below), or include individual files as needed --> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
    </body> 
 
</html>

來源

2016-12-30 ani_css

你可以把它動態的這種方式。該解決方案將在任何數量的轉盤的工作，你有沒有任何變化:)

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

來源

2016-12-30 11:21:16

，我見過謝謝:) –

@recruit_man歡迎偉大的解決方案:) –

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

來源

2016-12-30 11:08:29

自動添加指標到自舉輪播

回答

相關問題