Jquery flexslider2-添加幻灯片似乎有效，但未添加幻灯片

我试图使用flexslider2的addSlide功能，但似乎无法使其正常工作。在页面加载时，dom中有一个幻灯片。然后，我使用ajax动态添加幻灯片。所有ajax都能正确执行，但幻灯片添加却不能

我修改了一个不使用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>

15秒
30秒
1分钟
2分钟
5分钟
刷新率
启动实时更新
停止实时更新
查看器刷新：已暂停

默认幻灯片

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');  
});

//滑块加载函数
$（'.flexslider'）.flexslider({
动画：“淡入淡出”，
动画速度：400，
幻灯片放映：错误
});
变量滑块=$（'.flexslider'）。数据（'flexslider'）；
var-timerId；
var timerStatus；
//启动计时器
$（'#dtStart'）。在（'click'，函数（）{
if（timerStatus！=真）{
var timerCount=$（'#dtRefresh'）.val（）；
$（“#dtStart”）.addClass（'hide'）；
$（“#dtStop”）.removeClass（'hide'）；
}
函数倒计时（计数）{
if（timerStatus！=真）{
timerStatus=true；
timerId=setInterval（函数（）{
计数--；
$（“#dtTimer”）.html（计数）；
如果（计数=0）{
$（“#dtTimer”）.html（计数）；
计数=时间计数；
//添加幻灯片
slider.addSlide（“
已添加”
”，slider.count+1）；
}
}, 1000);
}
}
倒计时（timerCount）；
});
//停止计时器
$（'#dtStop'）。在（'click'，函数（）{
清除间隔（timerId）；
timerStatus=false；
$（“#dtTimer”）.html（'Paused'）；
$（“#dtStart”）.removeClass（'hide'）；
$（“#dtStop”）.addClass（'hide'）；
});

更新： 我发现，如果在添加幻灯片时不提供位置，则默认为结尾。当我使用“幻灯片”时，它也能像预期的那样工作，但当我使用我想使用的“淡入淡出”时，它仍然不能工作

使用幻灯片更新小提琴-

你可以查看上面的内容，然后切换到“淡入淡出”，看看我在说什么。幻灯片根本不显示。也许这是一个css问题？任何帮助都将不胜感激。

您可以试试这个

var slider = $('.flexslider').flexslider();
var ssIndex = $(".slides li").length ;
slider.addSlide('<li>test</li>', ssIndex);

var slider=$（'.flexslider'）.flexslider（）；
var ssIndex=$（“.li”）.length；
slider.addSlide（“
测试”
”，ssIndex）；

如果您不了解这一点，请创建一个JSFIDLE或解释更多内容

.flex-active-slide{
    display:block !important;
}

解决了使用淡入淡出时的问题。

添加了一个提琴-要点是页面加载时有一张幻灯片，当计时器达到零时，新幻灯片将添加到页面末尾。