title: Bootstrap slideshow (carousel) indicators not working
body: <p>I have just coded bootstrap carousel but I'm not able to get the indicators (left, right) for scrolling.</p>
  
  <p>Please find the snippet below</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-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width; initital-scale=1"&gt;
      &lt;title&gt; Bootstrap Example&lt;/title&gt;
  
      &lt;!-- Bootstrap References --&gt;
  
      &lt;!-- Latest compiled and minified CSS --&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
  
      &lt;!-- jQuery library --&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"&gt;&lt;/script&gt;
  
      &lt;!-- Latest compiled JavaScript --&gt;
      &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
      &lt;script src="index.js"&gt;&lt;/script&gt;
      &lt;link href="index.css" rel="stylesheet" type="text/css" /&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div class="container"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-sm-12"&gt;
                  &lt;div id="mySlider" class="carousel slide" data-ride="carousel"&gt;
  
                      &lt;!-- .nav's buttons on the bottom --&gt;
                      &lt;ol class="carousel-indicators"&gt;
                        &lt;li data-target="#mySlider" data-slide-to="0" class="active"&gt;&lt;/li&gt;
                        &lt;li data-target="#mySlider" data-slide-to="1"&gt;&lt;/li&gt;
                      &lt;/ol&gt;
  
                      &lt;!-- Image slides --&gt;
                      &lt;div class="carousel-inner" role="listbox"&gt;
  
                          &lt;div class="item active"&gt;
                              &lt;figure&gt;
                                  &lt;img width=500px height=500px src="http://www.hdwallpapersfreedownload.com/uploads/large/fruits/orange-fruit-with-leaf-hd.jpg" alt="Slide1"&gt;
                                  &lt;!--&lt;div class="carousel-caption"&gt;This is a fruit leaf&lt;/div&gt;--&gt;
                              &lt;/figure&gt;
                              &lt;figcaption class="carousel-caption"&gt;This is a fruit leaf&lt;/figcaption&gt;
                          &lt;/div&gt;
  
                          &lt;div class="item"&gt;
                              &lt;figure&gt;
                                  &lt;img width=500px height=500px src="http://www.greatgrubclub.com/domains/greatgrubclub.com/local/media/images/medium/4_1_1_kiwi.jpg" alt="Slide2"&gt;
                                  &lt;!--&lt;div class="carousel-caption"&gt;This is a fruit leaf&lt;/div&gt;--&gt;
                              &lt;/figure&gt;
                              &lt;figcaption class="carousel-caption"&gt;KIWIf&lt;/figcaption&gt;
                          &lt;/div&gt;
  
                      &lt;/div&gt; &lt;!-- END: Image slides --&gt;
  
  
                      &lt;!-- Slide buttons (left,right) buttons --&gt;
                      
                      &lt;a class="left coursel-control" href="#mySlider" role="button" data-slide="prev"&gt;
                            &lt;span class="carousel-control-prev-icon" aria-hidden="true"&gt;&lt;/span&gt;
                            &lt;span class="sr-only"&gt;Previous&lt;/span&gt;
                      &lt;/a&gt;
                      &lt;a class="right coursel-control" href="#mySlider" role="button"&gt;
                            &lt;span class="carousel-control-next-icon" aria-hidden="true"&gt;&lt;/span&gt;
      &lt;span class="sr-only"&gt;Next&lt;/span&gt;
                      &lt;/a&gt;
  
                  &lt;/div&gt; &lt;!-- END: Slider --&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I get the scrolling and everything but the <strong>right "Indicator" to scroll does not appear</strong> </p>
  
  <p><strong>What am I doing wrong?</strong></p>
  
  <p>Thanks</p>