올빼미 회전 목마 2의 동적 콘텐츠로드

Question

사용자 작업에 따라 다른 항목을 표시해야하는 2 개의 회전식 슬라이드가있는 웹 페이지가 있습니다.

새로운 데이터는 인터넷에서 가져온 것이고, 나는 페치 (fetch)를 사용하여 json을 배열로 구문 분석합니다.

캐롤라이나에서 새 항목을 기존 항목으로 대체 할 수 없다는 문제 만 있습니다.

간단한 예를 들어 나는

var carousel = $jq("#owl-genres"); 
for(...) { 
    carousel.owlCarousel() 
     .trigger('add.owl.carousel', [$jq('<div class="item">' + genres[i] + '</div>')]) 
     .trigger('refresh.owl.carousel'); 
} 

을 시도했지만 아무 반응이 없습니다. 메서드가 실행되고 .trigger이 실행 되더라도 이전 요소는 그대로 유지됩니다.

나는 또한 실제로 회전 목마에 새 항목을 추가

for(...) { 
    content += '<div class=\'item\'>' + genres[i] + '</div>' 
    carousel.html(content) 
} 
carousel.owlCarousel().trigger('refresh.owl.carousel'); 

을 시도했지만 그들은 지금 수직으로 적층, 네비게이션 나는 전체 회전 목마가 깨진 것 같아요 작동하지 않습니다.

올빼미 회전 목마 2의 항목을 대체하는 올바른 방법은 무엇입니까?

Answer 1

해결 https://stackoverflow.com/a/37862372/4249825

이 모두 표시하고 최대한 빨리 데이터 업데이트로 실행 가능한 요소들의 새로운 배열을 수신하는 기능에 넣을 수에 기초. 이 다른 사람을 도움이 될 것입니다 희망 (이것에 대해 많은 질문이 보았다 ...)

//these 3 lines kill the owl, and returns the markup to the initial state 
carousel.trigger('destroy.owl.carousel'); 
carousel.find('.owl-stage-outer').children().unwrap(); 
carousel.removeClass("owl-center owl-loaded owl-text-select-on"); 

// add the new items 
for (var i = 0; i < genres.length; i++) { 
    content += "<div class=\"item\">" + genres[i] + "</div>" 
} 
carousel.html(content); 

//reinitialize the carousel (call here your method in which you've set specific carousel properties) 
carousel.owlCarousel();