title: Add indicators automatically to bootstrap carousel
body: <p>I have bootstrap carousel in example as youu see and I don't want to add indicators in html I just want to add in js to work for every carousel and I found a function on the internet and it's work very well but it's work just for one carousel</p>
  
  <p>I have two carousel <code>#carousel-1</code> and <code>#carousel-2</code> but my function work is just for <code>#carousel-1</code>.I know if I give same class my problem will be solved but carousel id and <code>li.data-target</code> of indicators must be same.</p>
  
  <p>How can I add <code>carousel-indicators</code> automatically with js to see their indicators ?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>  var myCarousel = $("#carousel-1");
    myCarousel.append("&lt;ol class='carousel-indicators'&gt;&lt;/ol&gt;");
    var indicators = $(".carousel-indicators"); 
    myCarousel.find(".carousel-inner").children(".item").each(function(index) {
        (index === 0) ? 
        indicators.append("&lt;li data-target='#carousel-1' data-slide-to='"+index+"' class='active'&gt;&lt;/li&gt;") : 
        indicators.append("&lt;li data-target='#carousel-1' data-slide-to='"+index+"'&gt;&lt;/li&gt;");
    });     
  
  $('.carousel').carousel();</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.carousel{
    margin:20px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --&gt;
      &lt;!-- Bootstrap --&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"&gt;
  
  
      &lt;!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --&gt;
      &lt;!-- WARNING: Respond.js doesn't work if you view the page via file:// --&gt;
      &lt;!--[if lt IE 9]&gt;
        &lt;script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"&gt;&lt;/script&gt;
        &lt;script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"&gt;&lt;/script&gt;
      &lt;![endif]--&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;h1&gt;SLİDER 1&lt;/h1&gt;
  
      &lt;!-- SLIDER 1--&gt;
      &lt;div id="carousel-1" class="carousel slide" data-ride="carousel"&gt;
  
    &lt;div class="carousel-inner" role="listbox"&gt;
      &lt;div class="item active"&gt;
        &lt;img src="https://cdn.pixabay.com/photo/2016/12/26/02/13/bishan-1931390_960_720.jpg" alt="..."&gt;
      &lt;/div&gt;
      &lt;div class="item"&gt;
        &lt;img src="https://cdn.pixabay.com/photo/2016/12/26/15/34/simplicity-1932331_960_720.jpg" alt="..."&gt;
        &lt;div class="carousel-caption"&gt;
          
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;a class="left carousel-control" href="#carousel-1" role="button" data-slide="prev"&gt;
      &lt;span class="glyphicon glyphicon-chevron-left" aria-hidden="true"&gt;&lt;/span&gt;
      &lt;span class="sr-only"&gt;Previous&lt;/span&gt;
    &lt;/a&gt;
    &lt;a class="right carousel-control" href="#carousel-1" role="button" data-slide="next"&gt;
      &lt;span class="glyphicon glyphicon-chevron-right" aria-hidden="true"&gt;&lt;/span&gt;
      &lt;span class="sr-only"&gt;Next&lt;/span&gt;
    &lt;/a&gt;
  &lt;/div&gt;
      &lt;!-- SLIDER 1 END--&gt;
      
      &lt;h1&gt;SLİDER 2&lt;/h1&gt;
      
      &lt;!-- SLIDER 2--&gt;
      &lt;div id="carousel-2" class="carousel slide" data-ride="carousel"&gt;
  
    &lt;div class="carousel-inner" role="listbox"&gt;
      &lt;div class="item active"&gt;
        &lt;img src="https://cdn.pixabay.com/photo/2016/12/26/02/13/bishan-1931390_960_720.jpg" alt="..."&gt;
      &lt;/div&gt;
      &lt;div class="item"&gt;
        &lt;img src="https://cdn.pixabay.com/photo/2016/12/26/15/34/simplicity-1932331_960_720.jpg" alt="..."&gt;
        &lt;div class="carousel-caption"&gt;
          
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;a class="left carousel-control" href="#carousel-2" role="button" data-slide="prev"&gt;
      &lt;span class="glyphicon glyphicon-chevron-left" aria-hidden="true"&gt;&lt;/span&gt;
      &lt;span class="sr-only"&gt;Previous&lt;/span&gt;
    &lt;/a&gt;
    &lt;a class="right carousel-control" href="#carousel-2" role="button" data-slide="next"&gt;
      &lt;span class="glyphicon glyphicon-chevron-right" aria-hidden="true"&gt;&lt;/span&gt;
      &lt;span class="sr-only"&gt;Next&lt;/span&gt;
    &lt;/a&gt;
  &lt;/div&gt;
      &lt;!-- SLIDER 2 END--&gt;
      
      &lt;!-- jQuery (necessary for Bootstrap's JavaScript plugins) --&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"&gt;&lt;/script&gt;
      &lt;!-- Include all compiled plugins (below), or include individual files as needed --&gt;
      &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>