woothemes Flexslider (v2.7.0) \ Стиль карусели не обновляется динамически загружаемыми изображениями

Question

Я ищу решение, почему flexslider не работает с динамически загружаемыми изображениями или, очень вежливо, исправляет ошибку.

Я использую flexslider v2.7.0 в шаблоне WordPress. Если я добавлю свои изображения жестко, слайдер загружается нормально. ** Но в реальном мире мы загружаем наши изображения динамически, используя ajax, в частности, jQuery $.ajax. Введите вопрос...

Ползунок карусели и миниатюр не обновляет и не применяет стиль, когда изображения загружаются динамически с использованием JavaScript. Фактически, ни одно из изображений, добавленных к слайдеру или карусели, не появляется!

В качестве теста я добавил на страницу кнопку, по которой можно щелкнуть, чтобы инициализировать карусель после загрузки динамических изображений. (Я знаю, что изображения загружаются, потому что источник HTML показывает их - показано ниже.)

Я попытался заставить это работать, используя отложенное обещание с таймером и используя $(window).load(..., помещая инициализацию как до, так и после загрузки динамического изображения, но ничего не работает. Здесь выдержка из моего кода

// loadSlider will be called after getSketchData(url) completes
// begin here
$.when(getSketchData(url)).then(loadSlider);

// initialize
//
function loadSlider() {
    $('#carousel').flexslider({
        animation: "slide",
        controlNav: false,
        animationLoop: false,
        slideshow: false,
        itemWidth: 95,
        itemMargin: 5,
        asNavFor: '#slider'
    });
    // thumbs
    $('#slider').flexslider({
        animation: "slide",
        controlNav: false,
        animationLoop: false,
        slideshow: false,
        sync: "#carousel",
        start: function(slider){
            $('body').removeClass('loading');
        }
    });
}

// add image to slide and carousel
//
function handleSketchSlides( data ) {
 $("#slider ul.slides").append($("<li>").append('<img src="data:image/png;base64,' + data + '" />'));
 $("#carousel ul.slides").append($("<li>").append('<img src="data:image/png;base64,' + data + '" />'));
}

// Now...notice the dynamic image loaded but without flex-viewport style applied 
// (only showing slider with 1 image for brevity)
//
<section class="slider">
 <div id="slider" class="flexslider">
  <ul class="slides col-md-12">
   <li><img src="data:image/png;base64,my binary image here"></li></ul>
 </div> ...

// And here, after clicking my button to call flexslider initialize, 
// the flex-viewport style is applied, 
// including flex-direction-nav, etc.
//(only showing slider with 1 image for brevity)
// AND, the slider and carousel display and function 100%
//
<section class="slider">
 <div id="slider" class="flexslider">
  <div class="flex-viewport" style="overflow: hidden; position: relative;">
   <ul class="slides col-md-12" style="width: 630%; transition-duration: 0s; transform: translate3d(0px, 0px, 0px);">
<li class="flex-active-slide"><img src="data:image/png;base64, my binary image here" draggable="false"></li> ...

http://flexslider.woothemes.com/thumbnail-slider.html