1

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

1 respuesta 1

0

async function getJSON() {
    /**@todo Cargas los datos del API*/
    let responseJson = [1,2,3];
    let tab3="";
    for (let x  of responseJson){
     tab3 += ` <div class="swiper-slide"><img src="http://cssslider.com/sliders/demo-10/data1/images/${x}.jpg" alt="Responsive  carousel " title="Material Design">  </div>`; 
    }
    document.getElementById("lista").innerHTML =''+ tab3;         


}
async function initSlider (){
    await 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',
    });
}

initSlider()
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;
      }
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<link href="https://unpkg.com/swiper/swiper-bundle.min.css" rel="stylesheet"/>

<div style="height: 90%;"  class="swiper mySwiper">
  <div class="swiper-wrapper" id="lista">

  </div>
  <div class="swiper-pagination"></div>
</div>

El problema radica en que getJSON(); es una Promesa, por lo que no espera a que termine la carga para inicializar el swiper, una vez inicializado el swiper se romperá si cargas nuevos datos ya que está pensado para renderizar y trabajar estático. una solución es esperar que termine await getJSON() y luego ejecutar la creación del swiper, crea métodos diferentes y llama a cada en orden, en la documentación te explica el método: preloadImages, que fuerza la carga de las imágenes. puedes utilizar esta como segunda solución combinando con un reload del js, para que se construya swiper en el momento que termine la carga del JSON

2
  • vale ya veo, me puedes indicar un script donde primero se cargue todo para que luego se pinte evitando el problema de las cargas, te agradeceria bastante Commented el 20 sept. 2021 a las 3:51
  • Tienes un ejemplo en mi respuesta, solo tienes que adaptarlo
    – roldos
    Commented el 20 sept. 2021 a las 21:16

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.