Estoy usando la base de datos Firebase Realtime para cargar algunos datos, pero estoy cargando los datos en un innerHTML interno de un elemento <span> dentro de un carrusel de búhos ("https://unpkg.com/swiper/swiper-bundle.min.js ") los datos solo se cargan cuando hago clic en la flecha izquierda del carrusel. Probé el problema con un elemento <p> y se carga instantáneamente, mi código de carga es:
<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>Parece que loop:true está estropeando mi código