jQuery Flexslider Ajax幻灯片

I'm new to jquery and ajax, I was wondering how to load the slides of jquery flexslider from ajax? Ajax content is triggered on click of add button.

I tried this code but unfortunately it didn't work:

$('#carousel').flexslider({
    animation: "slide",
    controlNav: false,
    animationLoop: false,
    slideshow: false,
    itemWidth: 210,
    itemMargin: 5,
    asNavFor: '#slider',
    start: function(){
        $("#add").click(function(){
          $("div#slider .slides").load('ajax_content.php');
        });
    }
  });

Any help would be very much appreciated. Thanks in advance!

Try to do something like this(note: it's may require adjustment):

start: function(slider){
    $("#add").click(function(){
        $.get('ajax_content.php', function(data) {
            $('#slider .slides').append(data);
        });

        slider.addSlide(".step1", 1);
    });
}

A simple way for me :)

$(window).load(function(){
    $.get('banner.php?position=top', function(data){
      //Step 1  load your images content data
      $('.sliders').append(data);

      //Step 2 use flexslider
      $('.flexslider').flexslider({
        animation:'slide'  
      });
    });
});

Good luck.

Try this.

after: function(slider) { $.post('pagination.php', { page: page, param1 : param1 }, function(data) { if (data) { slider.addSlide(data); } }) }