asp.net-mvc-3 - flexslider 2 新しい画像を動的に追加して、カルーセルにスライドさせます

Question

いくつかの画像を含むスライドのページがあります。今必要なのは、ポストバックなしでカルーセルのスライドに新しい画像を追加することです。私が持っているコードはこれです

フレックススライダー

  $(window).load(function() {
$('.flexslider').flexslider({
  animation: "slide",
  controlsContainer: ".flex-container",
  start: function(slider) {
    $('.total-slides').text(slider.count);
  },
  after: function(slider) {
    $('.current-slide').text(slider.currentSlide);
  }
});

ajax コード

  $.ajax({
    url: '@Url.Action("LoadCarrusel","picture",new { @id =  @Model.Propertyid })',
    type: 'GET',
    dataType: 'json',
    success: function (data) {
        var flexslider = document.getElementById("flexslider");
       // process the data coming back
        $.each(data, function (index, item) {

            var link = "../../Content/Uploaded-img/" + item;
            var imag = document.createElement("img");
            imag.setAttribute("src", link);

            var newpicture = document.createElement("li");

            var newpictureItem = document.createTextNode(imag);
            newpicture.appendChild(imag);           
            flexslider.appendChild(newpicture);              

        });
    },

    error: function (xhr, ajaxOptions, thrownError) {
        alert(xhr.status);
        alert(thrownError);
    }

});

データjsonを渡すコントローラーは

 public ActionResult LoadCarrusel(long id)
    {
        var routes = from s in db.Picture
                     where s.IdProp == id
                     select s.Location;


        return Json(routes, JsonRequestBehavior.AllowGet);
    }