flexslider2-添加幻灯片似乎可以工作，但未添加幻灯片li

我正在尝试使用flexslider2的addSlide功能，但似乎无法正常工作。在页面加载时，dom中有一张幻灯片。然后，我使用Ajax动态添加幻灯片。所有ajax均正常运行，但幻灯片添加不正常。

我已经在http://jsfiddle.net/66fUv/2/上修改了一个小提琴，它没有使用ajax，但是复制了相同的问题。

我已经玩了几个小时了...

<div class="row">
    <div class="col-md-12">
        <div>
            <select id="dtRefresh" class="form-control input-small select2me">
                <option value="16">15 seconds</option>
                <option value="31" selected="selected">30 seconds</option>
                <option value="61">1 minute</option>
                <option value="121">2 minutes</option>
                <option value="301">5 minutes</option>
            </select>
            <label class="control-label"> refresh rate</label>
        </div>
        <div class="margin-top-15 clearfix">
            <button id="dtStart" type="button" class="btn btn-sm btn-primary"><i class="fa fa-play"></i> &nbsp;Start Real-time Updates</button>
            <button id="dtStop" type="button" class="hide btn btn-sm btn-danger"><i class="fa fa-pause"></i> &nbsp;Stop Real-time Updates </button>
            <div class="pull-right">
                <button type="button" class="btn btn-sm btn-info"><i class="fa fa-refresh"></i> &nbsp;Viewer Refresh : <span id="dtTimer">Paused</span></button>
            </div>                  
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-12">
        <div class="flexslider">
            <ul id="ss-slider" class="slides">
                <li>default slide</li>
            </ul>
        </div>
    </div>
</div>

js：

// slider load function
$('.flexslider').flexslider({
    animation: "fade",              
    animationSpeed: 400,
    slideshow: false
});


var slider = $('.flexslider').data('flexslider');
var timerId;
var timerStatus;

// start timer
$('#dtStart').on('click', function () {
    if(timerStatus != true) {
        var timerCount = $('#dtRefresh').val();
        $("#dtStart").addClass('hide');
        $("#dtStop").removeClass('hide');
    }

    function countdown(count) {             
        if(timerStatus != true) {
            timerStatus = true;
            timerId = setInterval(function() {
                count--;
                $("#dtTimer").html(count);
                if(count == 0) {
                    $("#dtTimer").html(count);
                    count = timerCount;


                    //add the slide
                    slider.addSlide('<li>added</li>', slider.count + 1);

                }

            }, 1000);
        }
    }
    countdown(timerCount);    
});

//stop timer
$('#dtStop').on('click', function () {
    clearInterval(timerId);
    timerStatus = false;
    $("#dtTimer").html('Paused');
    $("#dtStart").removeClass('hide');
    $("#dtStop").addClass('hide');  
});

更新：我发现，如果您在添加幻灯片时不提供职位，则默认为结尾。我在使用“幻灯片”时也可以按预期方式工作，但在使用“淡入淡出”时仍然无法使用，这就是我想使用的方式。

使用幻灯片更新小提琴-使用幻灯片更新小提琴

您可以查看上面的内容并更改为“ fade”以了解我在说什么。幻灯片根本不显示。也许这是一个CSS问题？任何帮助将非常感激。