slickslider arbeitet nicht an dynamischem Inhalt

Question

Unten ist ein Beispiel, das ich auf jsFiddle gemacht habe, um das Problem zu reprodizieren, das ich gegenüberstelle. Ich feuere eine Init-Funktion zum Erstellen von Slider nach dem Laden von dynamischen Inhalten über Ajax. Ein Teil der von slick erstellten Elemente und Klassen wird zu DOM hinzugefügt, funktioniert aber nicht.

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>

jede Hilfe dankbar :)

Answer 1

Sie setTimeout weil Ihre Inhalte zu entfernen, müssen anhängen op-posts-slider nach der Belastung des glatten bis t:

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

Erstens, was ist das loadspan div innerhalb des Slider-Containers? Wenn Sie glätten, wird es versuchen, das als eine Folie zu verwenden.

Darüber hinaus sieht es so aus, als ob zwischen dem erstellten Markup und dem initialisierten Slider ein Race-Zustand besteht. Der Schieberegler wird initialisiert, bevor der Inhalt tatsächlich innerhalb des Containers ist. Ich glaube auch nicht, dass Sie diese setTimeout-Funktion in dort brauchen, sollten Sie es so etwas wie

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

strukturieren