Skip to content

Data not loading

I’m using Firebase Realtime database to load some data, but I am loading the data to an innerHTML of a <span> element inside an owl carousel(“”) the data only loads when I click the left arrow of the carousel.I tested the problem with a <p>element and it loads instantly my loading code is:

<script type="module">
      // Import the functions you need from the SDKs you need
      import { initializeApp } from "";
      import  {getDatabase, ref, child, get , onValue} from "";
      import { getAnalytics } from "";
      // TODO: Add SDKs for Firebase products that you want to use
      // Your web app's Firebase configuration
      // For Firebase JS SDK v7.20.0 and later, measurementId is optional
      const firebaseConfig = {
      const span = document.getElementById("12")
      // Initialize Firebase
      const app = initializeApp(firebaseConfig);
      const analytics = getAnalytics(app);

      const dbRef = ref(getDatabase());
      get(child(dbRef, 'people/1')).then((snapshot) => {
        if (snapshot.exists()) {
          span.innerHTML = snapshot.val()
        } else {
          console.log("No data available");
      }).catch((error) => {


and my owl carousel code is:

        var swiper = new Swiper(".mySwiper", {
      slidesPerView: 3,
      spaceBetween: 30,
      slidesPerGroup: 3,
      loop: true,
      loopFillGroupWithBlank: true,
      pagination: {
        el: ".swiper-pagination",
        clickable: true,
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",


It seems that loop:true is messing up my code