title: Data not loading
body: <p>I'm using Firebase Realtime database to load some data, but I am loading the data to an <code>innerHTML</code> of a <code>&lt;span&gt;</code> element inside an owl carousel(&quot;https://unpkg.com/swiper/swiper-bundle.min.js&quot;) the data only loads when I click the left arrow of the carousel.I tested the problem with a <code>&lt;p&gt;</code>element and it loads instantly my loading code is:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script type="module"&gt;
        // Import the functions you need from the SDKs you need
        import { initializeApp } from "https://www.gstatic.com/firebasejs/9.6.10/firebase-app.js";
        import  {getDatabase, ref, child, get , onValue} from "https://www.gstatic.com/firebasejs/9.6.10/firebase-database.js";
        import { getAnalytics } from "https://www.gstatic.com/firebasejs/9.6.10/firebase-analytics.js";
        // TODO: Add SDKs for Firebase products that you want to use
        // https://firebase.google.com/docs/web/setup#available-libraries
      
        // Your web app's Firebase configuration
        // For Firebase JS SDK v7.20.0 and later, measurementId is optional
        const firebaseConfig = {
          //config
        };
        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) =&gt; {
          if (snapshot.exists()) {
            span.innerHTML = snapshot.val()
            console.log(snapshot.val());
          } else {
            console.log("No data available");
          }
        }).catch((error) =&gt; {
          console.error(error);
        });
  
        
  
       
      &lt;/script&gt;</code></pre>
  </div>
  </div>
  
  and my owl carousel code is:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script&gt;
       
          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",
        },
      });
      &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>