Problema slider immagini dinamico

[Luca Crippa]

Buonasera a tutti,

ho trovato online questo slider di immagini: https://codepen.io/suez/pen/wMMgXp

Per sua natura è statico: costruisco a mano il DOM e poi javascript fa il resto.

Ho provato a renderlo dinamico: faccio una lettura da db mysql tramite jquery, ajax e php, e costruisco dinamicamente il DOM. Ovviamente però lo slider non funziona, sempre per lo stesso problema: se costruisco dinamicamente il DOM, poi aggiungergli degli elementi attivi con javascript è un casino.

Ecco il mio codice, nell'ordine.

        
        <div class="demo-cont">          
          <!-- slider start -->
          <div class="fnc-slider example-slider" style="position:relative;top:-100px;">
            <div class="fnc-slider__slides put-slider-here"></div>
            <nav class="fnc-nav show-desktop">
              <div class="fnc-nav__controls put-slider-controls-here"></div>
            </nav>
          </div>
          <!-- slider end -->
        </div>

Poi, in fondo alla pagina:

  
<script>generateSlider();</script>

<script type="text/javascript" src="js/slider.js"></script>

Dentro generateSlider() faccio la chiamata ajax al db, poi popolo nel modo corretto i div "put-slider-here" e "put-slider-controls-here".
js/slider.js contiene tutto il codice js dello slider.

Di tutta risposta ottengo diversi errori:

Uncaught TypeError: Cannot read property 'addEventListener' of null at slider.js:180
Uncaught TypeError: Cannot read property 'classList' of null at performSliding (slider.js:85) at slider.js:124

Idee su come aiutarmi? E' impossibile che non ci sia un modo serio per rendere dinamici gli esempi statici trovati in internet.

Grazie mille!

[lucavizzi]

Da come descrivi la cosa, si direbbe che lo slider venga inizializzato quando ancora la chiamata ajax non ha restituito l'HTML.
Consiglierei di non usare ajax e di innestare il codice PHP direttamente nel documento.

[Luca Crippa]

Da come descrivi la cosa, si direbbe che lo slider venga inizializzato quando ancora la chiamata ajax non ha restituito l'HTML.
Consiglierei di non usare ajax e di innestare il codice PHP direttamente nel documento.

E' certamente ragionevole come cosa... e soprattutto tattica.
Però non c'è un modo per bloccare l'inizializzazione di script fino a che non siano finite le chiamate ajax?

Grazie

[lucavizzi]

E' certamente ragionevole come cosa... e soprattutto tattica.
Però non c'è un modo per bloccare l'inizializzazione di script fino a che non siano finite le chiamate ajax?

Grazie

Potresti includere il file js nella success function della chiamata ajax oppure rimuovere dal file.js il comando che lancia l'inizializzazione per utilizzarlo sempre nella success function.

[Luca Crippa]

Potresti includere il file js nella success function della chiamata ajax oppure rimuovere dal file.js il comando che lancia l'inizializzazione per utilizzarlo sempre nella success function.

Niente da fare.

Il codice sta qui, se puoi darci un occhio..

http://www.cineteatrosanluigi.it/nuovo/index.php

- gli script dello slider stanno in js/slider.js
- le funzioni principali stanno in js/functions.js -> la funzione è generateSlider(), dalla quale nella ajax success chiamo la fncSlider() che fa partire lo slider.

Però non va nulla..
Grazie