title: Bootstrap 3 thumbnail slider
body: <p>hi i'm trying to get this demo to load from <a href="http://www.bootply.com/87858" rel="nofollow">http://www.bootply.com/87858</a> ... copied everything correctly (I think) but no luck. Any idea what is causing this?</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
      &lt;head&gt;
          &lt;meta http-equiv="content-type" content="text/html; charset=UTF-8"&gt; 
          &lt;meta charset="utf-8"&gt;
          &lt;title&gt;Bootply.com - Bootstrap 3 Thumbnail Slider&lt;/title&gt;
          &lt;meta name="generator" content="Bootply" /&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"&gt;
          &lt;link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"&gt;
  
          &lt;!--[if lt IE 9]&gt;
            &lt;script src="//html5shim.googlecode.com/svn/trunk/html5.js"&gt;&lt;/script&gt;
          &lt;![endif]--&gt;
  
          &lt;!-- CSS code from Bootply.com editor --&gt;
  
  &lt;style type="text/css"&gt;
      .carousel-control {
  padding-top:10%;
  width:5%;
  }
  &lt;/style&gt;
      &lt;/head&gt;
  
      &lt;!-- HTML code from Bootply.com editor --&gt;
  
      &lt;body  &gt;
  
          &lt;div class="container"&gt;
      &lt;div class="col-md-12"&gt;
           &lt;h1&gt;Bootstrap 3 Thumbnail Slider&lt;/h1&gt;
  
          &lt;div class="well"&gt;
              &lt;div id="myCarousel" class="carousel slide"&gt;
  
                  &lt;!-- Carousel items --&gt;
                  &lt;div class="carousel-inner"&gt;
                      &lt;div class="item active"&gt;
                          &lt;div class="row"&gt;
                              &lt;div class="col-sm-3"&gt;&lt;a href="#x"&gt;&lt;img src="http://placehold.it/500x500" alt="Image" class="img-responsive"&gt;&lt;/a&gt;
                              &lt;/div&gt;
                              &lt;div class="col-sm-3"&gt;&lt;a href="#x"&gt;&lt;img src="http://placehold.it/500x500" alt="Image" class="img-responsive"&gt;&lt;/a&gt;
                              &lt;/div&gt;
                              &lt;div class="col-sm-3"&gt;&lt;a href="#x"&gt;&lt;img src="http://placehold.it/500x500" alt="Image" class="img-responsive"&gt;&lt;/a&gt;
                              &lt;/div&gt;
                              &lt;div class="col-sm-3"&gt;&lt;a href="#x"&gt;&lt;img src="http://placehold.it/500x500" alt="Image" class="img-responsive"&gt;&lt;/a&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;!--/row--&gt;
                      &lt;/div&gt;
                      &lt;!--/item--&gt;
                      &lt;div class="item"&gt;
                          &lt;div class="row"&gt;
                              &lt;div class="col-sm-3"&gt;&lt;a href="#x" class="thumbnail"&gt;&lt;img src="http://placehold.it/250x250" alt="Image" class="img-responsive"&gt;&lt;/a&gt;
                              &lt;/div&gt;
                              &lt;div class="col-sm-3"&gt;&lt;a href="#x" class="thumbnail"&gt;&lt;img src="http://placehold.it/250x250" alt="Image" class="img-responsive"&gt;&lt;/a&gt;
                              &lt;/div&gt;
                              &lt;div class="col-sm-3"&gt;&lt;a href="#x" class="thumbnail"&gt;&lt;img src="http://placehold.it/250x250" alt="Image" class="img-responsive"&gt;&lt;/a&gt;
                              &lt;/div&gt;
                              &lt;div class="col-sm-3"&gt;&lt;a href="#x" class="thumbnail"&gt;&lt;img src="http://placehold.it/250x250" alt="Image" class="img-responsive"&gt;&lt;/a&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;!--/row--&gt;
                      &lt;/div&gt;
                      &lt;!--/item--&gt;
                      &lt;div class="item"&gt;
                          &lt;div class="row"&gt;
                              &lt;div class="col-sm-3"&gt;&lt;a href="#x" class="thumbnail"&gt;&lt;img src="http://placehold.it/250x250" alt="Image" class="img-responsive"&gt;&lt;/a&gt;
                              &lt;/div&gt;
                              &lt;div class="col-sm-3"&gt;&lt;a href="#x" class="thumbnail"&gt;&lt;img src="http://placehold.it/250x250" alt="Image" class="img-responsive"&gt;&lt;/a&gt;
                              &lt;/div&gt;
                              &lt;div class="col-sm-3"&gt;&lt;a href="#x" class="thumbnail"&gt;&lt;img src="http://placehold.it/250x250" alt="Image" class="img-responsive"&gt;&lt;/a&gt;
                              &lt;/div&gt;
                              &lt;div class="col-sm-3"&gt;&lt;a href="#x" class="thumbnail"&gt;&lt;img src="http://placehold.it/250x250" alt="Image" class="img-responsive"&gt;&lt;/a&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;!--/row--&gt;
                      &lt;/div&gt;
                      &lt;!--/item--&gt;
                  &lt;/div&gt;
                  &lt;!--/carousel-inner--&gt; &lt;a class="left carousel-control" href="#myCarousel" data-slide="prev"&gt;‹&lt;/a&gt;
  
                  &lt;a class="right carousel-control" href="#myCarousel" data-slide="next"&gt;›&lt;/a&gt;
              &lt;/div&gt;
              &lt;!--/myCarousel--&gt;
          &lt;/div&gt;
          &lt;!--/well--&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
          &lt;script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script type='text/javascript' src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
          &lt;!-- JavaScript jQuery code from Bootply.com editor  --&gt;
  
  &lt;script type='text/javascript'&gt;
  
      $(document).ready(function() {
  $('#myCarousel').carousel({
  interval: 10000
  })
  
  $('#myCarousel').on('slid.bs.carousel', function() {
  //alert("slid");
  });
  
  
  });
  &lt;/script&gt;
  
  
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>