Question

我正在尝试使用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');  
});

更新我发现如果在添加幻灯片时没有提供位置，则默认为结束。我在使用'slide'时也按预期工作，但在使用'fade'时它仍然无法正常工作。这就是我想要使用的。

使用幻灯片更新小提琴 - updated fiddle with slide

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

Answer 1

你可以试试这个..

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

如果你没有得到这个...请创建一个jsFiddle或解释更多..

Answer 2

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

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

flexslider - 添加幻灯片似乎工作，但没有添加幻灯片

2 个答案: