JavaScript

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(“https://unpkg.com/swiper/swiper-bundle.min.js”) 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 "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) => {
        if (snapshot.exists()) {
          span.innerHTML = snapshot.val()
          console.log(snapshot.val());
        } else {
          console.log("No data available");
        }
      }).catch((error) => {
        console.error(error);
      });

      

     
    </script>

and my owl carousel code is:

<script>
     
        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",
      },
    });
    </script>

Answer

It seems that loop:true is messing up my code

Data not loading

Advertisement

Answer