title: Bootstrap Carousel from JSON loading slow
body: <p>I have a bootstrap carousel that is pulling its data from JSON. Our concern is how slow it is loading, and it appears to not start automatically. Here is the code.....</p>
  
  <pre><code>&lt;div id="myCarousel" class="carousel slide"&gt;
  
      &lt;ol class="carousel-indicators"&gt;&lt;/ol&gt;
  
      &lt;!-- Carousel items --&gt;
      &lt;div class="carousel-inner"&gt;&lt;/div&gt;
  
      &lt;!-- Carousel nav --&gt;
      &lt;a class="carousel-control left" href="#myCarousel" data-slide="prev"&gt;&amp;lsaquo;&lt;/a&gt;
      &lt;a class="carousel-control right" href="#myCarousel" data-slide="next"&gt;&amp;rsaquo;&lt;/a&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
      $.getJSON("/property/slideshow_json").done(function(data){
      //data is the array you expected.
      showCarousel(data, 0);
      })
  
      function showCarousel(arr, index){
      if(index &gt;= arr.length) index = 0;
  
      var item = arr[index];
      //update the dom using the data item.mls_number, item.address, item.price
      //$(".carousel-indicators").append($('&lt;li data-target="#myCarousel" data-slide-to="' +index+ '"&lt;/li&gt;'));
      $(".carousel-inner").append($('&lt;div class="item"&gt;&lt;img src="/property/photo/'+item.mls_number+'/1"&gt;&lt;div class="carousel-caption"&gt;&lt;h4&gt;PRICED TO SELL | $'+item.price+'&lt;/h4&gt;&lt;p style="text-transform:uppercase;"&gt;'+item.address+' &lt;a href="/property/detail/'+item.mls_number+'"class="btn btn-small btn-info pull-right"&gt;View Details&lt;/a&gt;&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;'));
  
      //set the timer
      setTimeout(function(){
      showCarousel(arr, index+1);
      }, 500);
      }
      $('.carousel').carousel({interval: 2500})
  &lt;/script&gt;
  </code></pre>