title: Bootstrap Carousel Lazy Load
body: <p>I'm trying to have the bootstrap Carousel lazy load. It seems like this should be straight forward, but I'm not even getting any errors here to troubleshoot. JS:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $('#bigCarousel').on("slid", function() {
          // load the next image after the current one slid
          var $nextImage = $('.active.item', this).next('.item').find('img');
          $nextImage.attr('src', $nextImage.data('lazy-load-src'));
      });
  
  &lt;/script&gt;
  </code></pre>
  
  <p>And then html:</p>
  
  <pre><code>&lt;div id="bigCarousel" class="carousel slide"&gt;
    &lt;div class="carousel-inner"&gt;
      &lt;div class="active item"&gt;
          &lt;img src="assets/bigimage1.jpg" class="img-big"&gt;
      &lt;/div&gt;
      &lt;div class="item"&gt;
          &lt;img data-lazy-load-src="assets/menu-header2.jpg" class="img-big"&gt;
      &lt;/div&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>No JS errors in firebug or anything else I can figure out, but my images just aren't loading. Probably something stupidly simple here...      </p>