光滑旋轉木馬只顯示第一項

Question

我遇到問題，只有第一個添加到div的元素顯示爲'光滑'旋轉木馬。

 $('.multiple-items').append('<div class="iimg"><img src="'+logo+'"><p>'+streamName+' is playing '+game+'</p><p>Viewers: '+viewers+'</p></div>'); 


     }); 

和

 if (dataOffline.logo !== null){ 
      $('.offline').append('<div class="iimg"><img src="'+dataOffline.logo+'"></div>'); 
     } 

      else { 
      $('.offline').append('<div><img src="http://placehold.it/150x150"></div>'); 
     } 

是兩次的getJSON請求的回調函數摘錄。在每種情況下，我都在第一個和第二個圖像中附加了一個包含圖像和段落的div。當這些操作完成時，我致電

$('.multiple-items').not('.slick-initialized').slick(); 
$('.offline').not('.slick-initialized').slick(); 

但是絕對沒有任何反應。在早期版本中，光滑的傳送帶工作正常，所以在我的html代碼中沒有鏈接問題。任何人都可以告訴我如何獲得兩個整齊的旋轉木馬？謝謝

Answer 1

如果你的旋轉木馬已經初始化，那麼你可以使用slickAdd，否則，你可以添加你的圖像，然後初始化。對於您的離線傳送帶，它可能類似於：

var slideToAdd = '<div><img src="http://placehold.it/150x150"></div>'; 
if(dataOffline.logo !== null){ 
    slideToAdd = '<div class="iimg"><img src="' + dataOffline.logo + '"></div>'; 
} 

var offline = $('.offline'); 
if(offline.hasClass('slick-initialized')){ 
    offline.slick('slickAdd',slideToAdd); 
} else { 
    offline.append(slideToAdd); 
    offline.slick(); 
} 

Answer 2

傳送帶初始化後，操作DOM。添加了箭頭，點，類和許多其他的東西。

如果添加圖像，則必須取消初始化整個傳送帶。

// this will work 
$('.multiple-items').slick(); 
$('.multiple-items').slick('unslick'); 
$('.multiple-items').append('<img src="...">'); 
$('.multiple-items').slick();