DOM не обновляется после изменения HTML Slick-карусели с AJAX

Question

Мой скользкий карусельного определяется внутри тела, как:

<div class="election-carousel"> 
     <?php echo Election.php::createView(); ?> 
</div> 

Элементы карусели создаются с помощью Ajax вызова интервала, но карусель не обновляется:

setInterval(function(){ 
      $.ajax({ 
       url: '../class/Election.php?createView=1', 
       success: function (html) { 
        $(".election-carousel").html(html); 
       }, 
       type: 'GET' 
      }); 
     }, 5000); 

Я проверил источник страницы после загрузки элементов карусели, и он есть. Я также попробовал .slick ("unlick"), а затем повторно инициализировать, но он не работает. Кажется, DOM, который не обновляется?

Answer 1

Вы должны делать slickAdd и slickRemove каждый раз, когда вы загружаете данные

setInterval(function(){ 
      $.ajax({ 
       url: '../class/Erection.php?createView=1', 
       success: function (html) { 
        $('.erection-carousel').slick('slickRemove',0); //remove elements starting with child 0 
        $('.erection-carousel').slick('slickAdd',html); //re-add new html 
       }, 
       type: 'GET' 
      }); 
     }, 5000);