title: Lazyloading images in horizontal slider
body: <p>I am lazyloading the images on this site with jquery lazyload and a treshold: <a href="https://bm-translations.de/#leistungen" rel="noreferrer">https://bm-translations.de/#leistungen</a></p>
  
  <pre><code>//Lazyload Images with Threshold https://www.appelsiini.net/projects/lazyload
  $(function() {
      $("img.lazy").lazyload({
          threshold : 400
      });
  }); 
  </code></pre>
  
  <p>So Images <code>src</code> is replaced by <code>data-original</code>. When I scroll to the element it should change it to <code>src</code>, as it.</p>
  
  <p>But out of some reason its loading the images in the bootstrap-slider too slow (<strong>when I click to it or its autosliding some images havent loaded</strong>), as you can see. How to adjust this code, so its working for this as well?</p>
  
  <p>The slider has a general structure like that: <a href="https://www.w3schools.com/bootstrap/bootstrap_carousel.asp" rel="noreferrer">https://www.w3schools.com/bootstrap/bootstrap_carousel.asp</a></p>
  
  <p><strong>Carousel JS is:</strong></p>
  
  <pre><code>$('#myCarousel').carousel({
          interval: 9000,
      });
  
      // handles the carousel buttons
      $('[id^=carousel-selector-]').click( function(){
        var id_selector = $(this).attr("id");
        var id = id_selector.substr(id_selector.length -1);
        id = parseInt(id);
        $('#myCarousel').carousel(id);
        $('[id^=carousel-selector-]').removeClass('selected');
        $(this).addClass('selected');
      });
  
      // when the carousel slides, auto update
      $('#myCarousel').on('slide.bs.carousel', function (e) {
        var id = $('.item.active').data('slide-number');
        id = parseInt(id)+1;
        $('[id^=carousel-selector-]').removeClass('selected');
        $('[id=carousel-selector-'+id+']').addClass('selected');
      });
  </code></pre>
  
  <p><strong>I tried this, but then it wasnt sliding anymore:</strong></p>
  
  <pre><code>$('#myCarousel').carousel({
          interval: 9000,
          scroll: {
              onBefore: function( data ) {
                var $current = data.items.visible.first(),
                    visible = data.items.visible,
                    src = visible.data('src');
  
                visible.attr('src', src);
              }
          }
      });
  </code></pre>
  
  <p>How to fix it, so its either lazy-loading before click/autoslide or at least to lazyload the whole carousel images with threshold?</p>