tratare de ser muy especifico. tengo un problema y lo tengo hace tiempo, nuevamente se me presenta y no se que hacer. Contexto: Resulta que cuando realizo una peticion a un api o a alguna ruta que me devuelva datos al momento de pintarlos las funciones de script o estilos de este elemento (dentro del diseño html o plantilla) se pierden y dejan de funcionar, a que me refiero: digamos que tenemos un SLIDER, el cual muestra imagenes con cierto estilo y propiedades unicas de el, ejemplo: http://cssslider.com/es/bootstrap-slider-10.html
si yo quiero llenar ese slider con imagenes dinamicas usando javascrip (hago una peticion a una base de dato que me devuelve las url) - (ajax o fetch) luego de hacer esta peticion y obtener los datos las propiedades de ese slider se pierden por completo. (este es mi gran problema)
significa que ya no puedo ver todas las imagenes haciendo tocuh en el slider, solo se muestra una, y aunque en el codigo html se vean (usando el inspector), no funciona el slider.
async function getJSON() {
let tab =``;
return fetch("api_con_url")
.then((response)=>response.json())
.then((responseJson)=>{/* responseJson*/
let tab3 = ``;
for (let x of responseJson){
tab3 += ` <div class="swiper-slide">SLIDE ${x.numero} </div>`;
}
document.getElementById("lista").innerHTML =''+ tab3;
});
}
getJSON();
var swiper = new Swiper('.mySwiper', {
pagination: '.swiper-pagination',
slidesPerView: 1,
paginationClickable: true,
spaceBetween: 30,
// Navigation arrows
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
});
<!-- Demo styles -->
html,
body {
position: relative;
height: 100%;
}
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color: #000;
margin: 0;
padding: 0;
}
.swiper {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
.swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
<link
rel="stylesheet"
href="https://unpkg.com/swiper/swiper-bundle.min.css"
/>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<!-- Initialize Swiper -->
<!-- Swiper -->
<!-- AQUI DEBERIA MOSTRARLAS PERO NO FUNCIONA -->
<h1>NO FUNCIONA</h1>
<div id="lista" style="height: 50%;">
</div>
<!-- SE DEBERIA VER ASI -->
<h1>COMO SE DEBERIA VER</h1>
<div style="height: 90%;" class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
</div>
<div class="swiper-pagination"></div>
</div>
Esto me pasa usando ya sea fetch y ajax, no se como solucionarlo, (ya ven que el problema es basicamente que se pierden las propiedades de ejecucion de los eventos de ese elemento) si tienen alguna idea o solucion les agradeceria