javascript - Slide my card when I get the data using fetch method

Question

I want to slide my card using carousel but when I apply the carousel class I get the blank output

I create the carousel file where I mention the slide duration and here I use a fetch method using api.

Is there way to apply the 'CSS' inside the fetch method ?

$('.owl-carousel4').owlCarousel({
  loop: true,
  nav: false,
  dots: false,
  autoplay: true,
  autoplayTimeout: 8000,
  autoplaySpeed: 5600,
  responsive: {
    0: {
      items: 1
    },
    700: {
      items: 3
    },
    1300: {
      items: 4
    }
  }
})


function fetchdata() {
  fetch('https://onlinemanufacturing.in//common/public/getAllVerifiedRequests').then(response => {
      if (!response.ok) {
        throw Error("ERROR");
      }
      return response.json();
    })
    .then(data => {
      console.log(data);
      const html = data.map(request => {
        return `
            <div id="box" class="box">
                <div class="content">
                <h2> ${request.title}</h2>
                <li> Status: ${request.status}</li>
                <li> Category: ${request.categoriesStr}</li>
                <li> Quantity: ${request.quantity}</li>
            </div>
            </div>
        `;
      }).join('')
      console.log(html);
      document.querySelector("#app").insertAdjacentHTML("afterbegin", html);
    })
    .catch(error => {
      console.log(error);
    });
}
fetchdata();

<div class="container-fluid" style="margin-top: 30px;">
  <div class="section-title">
    <h2>Open Leads</h2>
  </div>
  <div class="row">
    <div id="owl-demo" class=" owl-carousel owl-carousel4 owl-theme">
      <div class="col-12 mt-3">
        <div id="app" class="app">
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

等待大神答复