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>
<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>
Advertisement
Answer
It seems that loop:true
is messing up my code