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();