Impossible d'accéder à l'élément à l'intérieur du curseur slick

Question

J'utilise Slick Slider (http://kenwheeler.github.io/slick/) et j'essaie d'obtenir l'identifiant de l'élément que je change. Le code suivant fonctionne évidemment à l'extérieur du curseur slick, mais pour une raison étrange, il retourne toujours le premier élément du curseur.

 <div class="container-slide"> 
      <div class="slider slider-category"> 
      <div class="slider-card"> 
       <div class="row block-image"> 
        <div class="background-upload"> 
         <label for="image"> 
          <i class="fa fa-picture-o fa-2x" data-toggle="tooltip" data-placement="left"></i> 
         </label> 

         <input id="image" type="file" accept="image/png, image/jpeg, image/gif" name="image" class="text-center image-card" data-id="1"/> 
        </div>      
       </div>  

      </div> 

      <div class="slider-card"> 
       <div class="row block-image"> 
        <div class="background-upload"> 
         <label for="image"> 
          <i class="fa fa-picture-o fa-2x" data-toggle="tooltip" data-placement="left"></i> 
         </label> 

         <input id="image" type="file" accept="image/png, image/jpeg, image/gif" name="image" class="text-center image-card" data-id="2"/> 
        </div>      
       </div>  

      </div> 

     </div> 
     </div> 


$('.image-card').on('change', function() { 
    console.log($(this).data('id')); 

}); 

Le code jquery précédent me donne toujours "1" comme résultat. Donc, il obtient seulement le premier élément. Pourquoi cela se produit-il? Sans utiliser slick slider, ça marche évidemment bien, il n'y a pas de problème avec ce code très simple ...

Est-ce qu'il me manque quelque chose à propos de Slick Slider? J'ai tout lu et toute la documentation mais je n'ai rien trouvé pour ce problème. J'ai également essayé l'événement beforeChange, mais cela n'a pas fonctionné.

Merci

Answer 1

Ok J'ai trouvé le problème!

Je ne sais pas pourquoi mais l'identifiant et l'étiquette affectaient le changement.

Donc, si je change le code dans ceci:

<div class="container-slide"> 
     <div class="slider slider-category"> 
     <div class="slider-card"> 
      <div class="row block-image"> 
       <div class="background-upload"> 
        <label for="image"> 
         <i class="fa fa-picture-o fa-2x" data-toggle="tooltip" data-placement="left"></i> 
        </label> 

        <input id="image" type="file" accept="image/png, image/jpeg, image/gif" name="image" class="text-center image-card" data-id="1"/> 
       </div>      
      </div>  

     </div> 

     <div class="slider-card"> 
      <div class="row block-image"> 
       <div class="background-upload"> 
        <label for="image2"> 
         <i class="fa fa-picture-o fa-2x" data-toggle="tooltip" data-placement="left"></i> 
        </label> 

        <input id="image2" type="file" accept="image/png, image/jpeg, image/gif" name="image" class="text-center image-card" data-id="2"/> 
       </div>      
      </div>  

     </div> 

    </div> 
    </div> 

Il fonctionne très bien. (J'ai changé l'identifiant d'entrée et l'étiquette pour dans "image2".)