slickslider无法在动态内容上工作

Question

下面是我在jsFiddle上重新规划我面临的问题的一个示例。我通过ajax加载动态内容后触发init函数来创建滑块。部分由浮油创建的元素和类被添加到DOM，但不起作用。

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>

任何帮助赞赏:)

Answer 1

您需要删除setTimeout因为你的内容追加光滑的负荷后到t op-posts-slider：

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

首先，滑块容器内部的loadspan div在做什么？当你轻描淡写地尝试将其用作幻灯片时。

除此之外，它看起来好像在正在构建的标记和正在初始化的滑块之间存在竞争条件。内容实际上在容器内部之前，滑块正在初始化。我也不认为你需要那个setTimeout函数，你应该这样构造它：

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