How to initialize bootstrap carousel slider when called via ajax?

Question

JavaScript

Hello.

The page is formed by loading layout blocks through ajax calls. When the blocks are immediately loaded onto the page without ajax, the bootstrap carousel slider in these blocks automatically flips through the slides at certain intervals. But if the sliders are called via ajax, then there is no initialization - you need to press the arrow to turn the slides, and then the slider "reaches" that it is on the page and it's time to turn the slides yourself. How to initialize it when called?

The calling code is the following:

(function() {
 
 function ajax(geturl, showhere) {
        var ajaxObject;
        if (window.XMLHttpRequest) {
            var d = new Date();
            ajaxObject = new XMLHttpRequest();
            ajaxObject.open("GET", geturl + '?unk=' + d, true);
            ajaxObject.send();
            ajaxObject.onreadystatechange = function() {
                if (ajaxObject.readyState == 4 && ajaxObject.status == 200) {
                    document.getElementById(showhere).innerHTML = ajaxObject.responseText;
                }
            }
        }
    }
        
    var ifScroll = false;
    
    window.onscroll = function() {
        if (!ifScroll) {
            ajax('/templates/enter/landing-pages/blocks/dizayn-proyekt.txt', 'landing-body-1');
            ajax('/templates/enter/landing-pages/blocks/nashi-dizaynery.txt', 'landing-body-2');
 
            ifScroll = true;
        }
    }
    
})();

and html:

<div id="landing-body-1"></div>
<div id="landing-body-2"></div>

Answer 1

Found a solution:

var dataRide = document.querySelectorAll('[data-ride="carousel"]');
      
      for (var n = 0; n < dataRide.length; n++) {
        dataRide[n].carousel(dataRide[n].data());
      }