slickslider ne fonctionne pas sur le contenu dynamique

Question

Voici un exemple que j'ai fait sur jsFiddle pour reproduire le problème auquel je suis confronté. Je lance une fonction init pour créer un curseur après le chargement du contenu dynamique via ajax. Une partie des éléments et classes créés par slick sont ajoutés à DOM mais ne fonctionne pas.

function top_posts(el){ 
 
     var reqUrl = 'https://jsonplaceholder.typicode.com/users'; 
 
     el.children('.loadspan').html('<i class="fa fa-circle-o-notch fa-spin fa-fw" style="padding: 0;"></i>'); 
 
     $.ajax({ 
 
      url: reqUrl, 
 
      dataType: 'json', 
 
      }).done(function(data) { 
 
       el.children('.loadspan').hide(); 
 
       if(data != ""){ 
 
       \t \t console.log(data); 
 
        $.each(data, function(index) { 
 
          var output = '<div class="card-out">' + 
 
              '<div class="card-bg" style="background-image: url(https://placeimg.com/640/480/any);"></div>' + 
 
              '<div class="card-content">' + 
 
               '<div class="card-title">' + 
 
                this.name + 
 
               '</div>' + 
 
              '</div>' + 
 
             '</div>'; 
 
         setTimeout(function() { 
 
          el.append(output); 
 
         }, (100 * (index + 1))); 
 
        }); 
 
        top_slider_init(); 
 
       } else{ 
 
        el.children('.loadspan').html('<i class="fa fa-exclamation-triangle" aria-hidden="true"></i>'); 
 
       } 
 
       
 
      }).fail(function(jqXHR, textStatus) { 
 
       el.children('.loadspan').html('<i class="fa fa-exclamation-triangle" aria-hidden="true"></i>'); 
 
       console.log("Request failed: " + textStatus); 
 
      }); 
 
     return false; 
 
} 
 

 
    var el = $('.top-posts-slider'); 
 
    top_posts(el); 
 

 

 
function top_slider_init() { 
 
    $('.top-posts-slider').slick({ 
 
     slidesToShow: 3, 
 
     slidesToScroll: 1, 
 
     speed: 300, 
 
     adaptiveHeight: false, 
 
     variableWidth: false, 
 
     autoplay: true, 
 
     autoplaySpeed: 3000, 
 
     infinite: true, 
 
     dots: false, 
 
     arrows: false, 
 
     centerMode: false, 
 
     centerPadding: "50px", 
 
     cssEase: "ease-in-out", 
 
     draggable: true, 
 
     fade: false, 
 
     focusOnSelect: false, 
 
     pauseOnFocus: true, 
 
     pauseOnDotsHover: false, 
 
     vertical: false, 
 
     verticalSwiping: false, 
 
     rtl: false, 
 
    }); 
 
}

.card-out { 
 
    height: 200px; 
 
    width: 100%; 
 
    position: relative; 
 
} 
 
.card-bg { 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    background-size: cover; 
 
} 
 
.card-title { 
 
    position: absolute; 
 
    bottom: 10px; 
 
    left: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<div class="top-posts-slider"> 
 

 
<div class="loadspan"></div> 
 
</div>

toute aide appréciée :)

Answer 1

vous devez supprimer setTimeout parce que votre contenu est append à t op-posts-slider après la charge de la marée noire:

function top_posts(el){ 
     var reqUrl = 'https://jsonplaceholder.typicode.com/users'; 
     el.children('.loadspan').html('<i class="fa fa-circle-o-notch fa-spin fa-fw" style="padding: 0;"></i>'); 
     $.ajax({ 
      url: reqUrl, 
      dataType: 'json', 
      }).done(function(data) { 
       el.children('.loadspan').hide(); 
       if(data != ""){ 
         console.log(data); 
        $.each(data, function(index) { 
          var output = '<div class="card-out">' + 
              '<div class="card-bg" style="background-image: url(https://placeimg.com/640/480/any);"></div>' + 
              '<div class="card-content">' + 
               '<div class="card-title">' + 
                this.name + 
               '</div>' + 
              '</div>' + 
             '</div>'; 
         //remove settimeout 
         el.append(output); 
        }); 
        top_slider_init(); 
       } else{ 
        el.children('.loadspan').html('<i class="fa fa-exclamation-triangle" aria-hidden="true"></i>'); 
       } 

      }).fail(function(jqXHR, textStatus) { 
       el.children('.loadspan').html('<i class="fa fa-exclamation-triangle" aria-hidden="true"></i>'); 
       console.log("Request failed: " + textStatus); 
      }); 
     return false; 
} 

https://jsfiddle.net/ywuu006w/

Answer 2

Tout d'abord, que fait le loadpan div à l'intérieur du conteneur slider? Quand vous glissez, ça va essayer d'utiliser ça comme une diapositive. Au-delà de cela, il semble que vous ayez une condition de concurrence entre le balisage en cours de construction et le curseur en cours d'initialisation. Le curseur est en cours d'initialisation avant que le contenu ne se trouve réellement dans le conteneur. Je ne pense pas que vous ayez besoin de cette fonction setTimeout, vous devriez la structurer quelque chose comme

var output = ''; 
    $.each(data, function(index) { 
     output += 'All of your markup'; 
    } 
    el.append(output);    
    top_slider_init();