I got a flexslider div-Element working properly with static content.
However, when I try to add Images to it dynamically using jquery I get extremely strange and varying results.

I use the flexslider element within a Leaflet sidebar (which is, as I said working with static content) and load the images after the sidebar has completely expanded (using sidebar.on('shown', function...)).

The load function looks like this one:

```
this.loadImages = function(osm_id) {
    var nextImage = true;
    var counter = 1;

    while (nextImage) {
        var li = null;
        $.ajax({
            async : false,
            url : '/img/locations/'+osm_id+'/'+counter+'.jpg',
            type : 'HEAD',
            error : function() {
                nextImage = false;
            },
            success : function() {
                var path = '/img/locations/'+osm_id+'/'+counter+'.jpg';
                $('<img src="'+path+'">').load(function() {
                    var li = $("<li></li>");
                    $(this).appendTo(li);
                    li.appendTo($("#locationSlides"));
                }).ready(function() {
                    $("#flexslider").data("flexslider").addSlide(li);
                });
                counter++;
            }
        });
    }

}

```

Jquery loads the images and adds them to the flexslider class (DOM), however, they are't shown in the browser.
Calling

```
$("#flexslider").flexslider();

```

now shows the loaded images in Firefox, but doesn't show them in Chrome either, even though they are added to the DOM in both browsers.
But loading more pictures and calling the method a second time, has no effect in Firefox either anymore.

[![Before calling the flexslider function](https://i.stack.imgur.com/3LBFR.png)](https://i.stack.imgur.com/3LBFR.png)

[![after calling the flexslider function in firefox](https://i.stack.imgur.com/zKmel.png)](https://i.stack.imgur.com/zKmel.png)

I absolutely can't explain this behaviour.