lazy load not work in bootstrap carousel

Answer 1

Created this "kinda generic" solution some months ago and had no issues so far...

var $ajaxCarousel = $('.carousel-ajax');

if ($ajaxCarousel.length > 0) {
    $ajaxCarousel.on('slide.bs.carousel', function (e) {
        var $upcomingImage = $(e.relatedTarget).find('img');
        if (typeof $upcomingImage.attr('src') === 'undefined') {
            $upcomingImage.attr('src', $upcomingImage.data('src'));
        }
    });
    // preload first image
    $ajaxCarousel.each(function() {
        var $firstImage = $(this).find('[data-slide-number=0]').find('img');

        $firstImage.attr('src', $firstImage.data('src'));
    });
}

All you have to do in HTML is add "carousel-ajax" class to your existing carousel and prepend "data-" in front of your img's src tags: