슬릭 캐 러셀 만 첫 번째 항목 만 표시합니다.

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